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数 子 版 权 声 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
尸 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 
ME, SRE ERIRE IN, 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 尸 实 施 包 括 但 不 限于 关闭 该 
帐号 每 维权 措施 ， 并 可 能 退 究 法 律 
贡 任 。 


作 | 者 | 简 | 介 | 


RAA ”移动 平台 UI、UE 专 家 ， 高 级 讲 
师 ， 专 注 于 移动 设计 领域 ,美术 及 设计 功底 深 
厚 ， 具 有 丰富 的 平面 设计 和 移动 平台 设计 经 
验 。 精 通 i05、Android 和 Windows Phone 的 界 
面 设计 以 及 用 户 体验 设计 ， 参 与 多 款 大 型 网 络 
游戏 的 Android、i0S 客 户 端的 UI 及 UE 设计 ， 在 
国家 农产品 追溯 系统 ipad 客 户 端 项 目 中 担任 UI 
设计 师 ， 为 多 款 i0S 应 用 进行 用 户 体验 及 界面 
设计 ， 擅 长 移动 平 合 的 应 用 和 游戏 类 项 目的 视 
党 策划 及 界面 设计 。 曾 为 摩托 罗拉 、 通 用 、 宝 
洁 、 西 门 子 、 利 乐 等 知名 企业 做 过 视觉 设计 ， 
担任 智 捷 i03 课 堂 设计 总 监 。 著 有 《品味 移动 
设计 》 一 书 。 
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移动 互联 时 代 悄 然 来 临 ,主流 的 应 用 产品 (App) 已 经 从 PC 逐渐 转移 到 移动 设备 上 。 
与 此 同时 ,包括 纸 质 印刷 在 内 的 传统 传媒 平台 也 在 逐渐 被 移动 平台 取代 。 作 为 设计 师 ,交互 
设计 的 内 容 和 方式 .针对 的 设备 和 平台 以 及 用 户 群 体 也 相应 地 发 生变 化 。 时 过 境 迁 ,传统 的 
交互 方法 、 流 程 以 及 规范 和 禁忌 也 需要 相应 做 出 改变 ,才能 适应 移动 互联 时 代 不 断 变化 的 产 
品 需 求 。 在 这 个 过 程 中 ,扁平 化 设计 思想 对 于 交互 设计 .用 户 界 面 设计 以 及 用 户 体 验 设 计 的 
冲击 有 目 共 睹 。 在 2013 年 WWDC 大 会 上 ,苹果 公司 对 10S7 颠覆 性 的 改造 ,使 广大 交互 设 
计 工 作者 再 次 清晰 地 体会 到 扁平 化 设计 模式 已 经 是 大 势 所 趋 。 然 而 ,对 于 大 多 数 移 动 应 用 
的 开发 者 和 设计 者 来 说 ,各 大 移动 应 用 平台 的 App 商店 里 已 经 存在 的 成 千 上 万 的 应 用 已 经 
是 一 个 很 大 的 挑战 和 压力 ,更 何况 各 大 移动 应 用 平台 以 及 移动 产品 制造 商 陆 续 推 出 层 出 不 
穷 的 新 技术 、 新 观念 和 新 创意 ,它们 不 断 地 更 新 着 所 有 移动 用 户 的 使 用 方式 和 选 购 的 趋 癌 。 
如 何 才 能 设计 出 更 加 吸引 人 的 移动 应 用 产品 , 单 任 开发 技术 人 员 已 经 很 难 做 到 。 在 本 书 中 ， 
我 们 从 一 个 设计 师 的 角度 ,与 大 家 分 享 如 何 塑 造 出 与 众 不 同 、 独 树 一 帜 以 及 充满 个 性 和 创新 
的 App 产品 。 

本 书 的 特点 

本 书 是 由 移动 应 用 设计 的 用 户 体 验 设 计 师 与 移动 开发 技术 专家 联手 撰写 。 人 针对 三 大 移 
动 平 台 里 最 流行 的 10S 平 台 , 以 及 运行 10S 平 台 的 两 大 类 移动 产品 GPhone 和 iPad) 的 规格 
和 要 求 ,系统 曾 述 设计 移动 应 用 的 方法 、 步 又 以 及 过 程 中 的 诸多 细节 。 本 书 可 以 为 读者 在 移 
动 应 用 的 设计 过 程 中 从 项 上 日 方案 确立 直至 交互 .界面 和 可 用 性 测试 完成 的 全 过 程 提 供 非常 
全 面 的 帮助 。 

为 了 使 读者 在 阅读 本 书 时 更 加 易于 理解 ,我 们 以 移动 应 用 设计 的 通常 流程 为 线索 , 按 部 
就 班 、 循 序 渐进 逐一 阐述 做 好 各 个 环节 设计 工作 的 方法 、 要 点 以 及 规范 和 禁忌 ,使 读者 在 设 
计 自 己 作品 的 时 候 , 不 但 明确 设计 的 思路 ,而 且 清 楚 自 己 所 处 的 设计 环节 ,做 到 统 观 全 局 、 有 
的 放 矢 。 无 论处 在 设计 流程 哪 一 个 阶段 ,都 会 有 很 多 相对 应 的 设计 环节 和 规范 要 点 ,这 对 于 
合理 规划 项 目 进度 和 制定 项 目 计划 很 有 帮助 ,也 能 使 设计 思路 更 加 的 清晰 、 合 理 。 

本 书面 向 的 读者 

阅读 本 书 不 需要 具备 专业 知识 ,本 书面 回 包 括 零 基 础 读者 在 内 的 所 有 移动 应 用 设计 的 
工作 者 和 爱好 者 。 同 时 ,本 书 还 面 加 所 有 准备 进行 移动 应 用 设计 与 开发 的 个 人 和 团队 ,以 及 
所 有 想 要 改进 和 创新 移动 应 用 的 个 人 或 团队 。 
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移动 设计 初学 者 : 可 以 帮助 你 从 零 开 始 , 逐 步 成 长 为 专业 、 全 面 的 移动 平台 交互 设计 、 
用 户 界 面 设计 及 用 户 体 验 设计 人 员 。 包 括 如 何 把 握 自 己 的 成 长 方向 .收集 自己 的 工作 素材 
和 资料 ,以 及 应 该 继续 了 解 哪 方面 的 知识 .进行 哪些 相应 的 训练 。 

企业 家 : 当今 ,移动 设备 已 经 逐渐 取代 电视 机 、 收 音 机 和 和 平面 广告 ,成 为 最 重要 的 媒体 
平台 。 能 否 通 过 完美 的 用 户 体 验 设计 为 你 的 企业 在 这 个 平台 上 占据 一 席 之 地 意义 重大 。 这 
本 著作 可 以 帮助 你 组 建 更 加 专业 的 用 户 体 验 团队 。 

设计 师 : 专业 的 设计 人 员 可 以 通过 本 书 了 解 最 全 面 和 最 科学 的 1O0S 用 户 体 验 设计 理论 
和 方法 ,是 一 本 非常 实用 的 参考 书 和 工具 书 。 同 时 ,还 可 以 帮助 你 在 不 同 的 设计 领域 中 迅速 
地 转型 ,拓宽 你 的 设计 业务 范围 。 

开发 人 员 : 从 此 以 后 ,你 将 不 再 是 一 名 传统 意义 上 的 .单纯 技术 类 的 1i9S 开发 人 员 。 本 
书 中 的 知识 将 有 效 地 帮助 你 开阔 视野 ,增进 你 与 设计 人 员 AR Up 项目 经 理 的 沟通 、 协 作 能 
力 。 同 时 ,你 的 工作 领域 也 会 得 到 扩充 ,成 为 名 副 其 实 的 多 面 手 。 

产品 经 理 : 本 书 会 有 效 地 提高 你 对 移动 产品 的 个 性 要 求 和 审美 格调 ,在 与 设计 师 和 开 
发 人 员 一 起 工作 的 时 候 , 你 的 建议 将 更 加 地 具有 说 服 力 。 同 时 在 项 目 讨论 中 可 以 参与 的 范 
围 将 更 加 全 面 且 更 具 原 则 性 。 

质量 保障 人 员 : 对 已 经 成 型 的 移动 应 用 进行 评审 或 测试 ,你 会 发 现 这 是 一 本 很 有 价值 
的 参考 书 和 工具 书 。 

销售 与 客服 : 了 解 用 户 体验 设计 中 的 专业 要 求 和 用 户 需 求 分 析 将 会 使 我 们 的 工作 更 加 
专业 ,以 及 具有 更 强 的 说 服 力 。 同 时 ,有 助 于 我 们 在 产品 的 讨论 会 上 提出 有 价值 的 意见 。 

本 书 的 网 站 

为 了 更 好 地 为 广大 读者 提供 服务 ,我 们 专门 为 本 书 建 立 了 一 个 网 站 http://www. 
uebookl. com, 大 家 可 以 查看 相关 出 版 进度 ,并 对 书 中 内 容 发 表 评 论 , 提 出 宝 叶 意见 。 

勘误 与 支持 

在 网 站 http://www. uebookl. com 中 建立 了 一 个 勘误 专区 ,及 时 地 把 书 中 的 问题 、 失 
误 和 纠正 反馈 给 广大 读者 ,您 发 现 了 什么 疑问 ,可 以 在 网 上 留言 ,也 可 以 发 送 电子 邮件 到 : 
2005bigfish(2163. com ,我们 会 在 第 一 时 间 回 复 您 ,也 可 以 在 新 浪 微 博 中 与 我 们 联系 。 请 关 
注 @ 大 羽 bigfish 和 @tony 关东 升 。 

致谢 

在 此 感谢 清华 大 学 出 版 社 的 盛 东 有 亮 编 辑 给 我 们 提供 了 宝 贯 的 意见 。 感 谢 智 捷 OS 这 
党 团队 的 机 云龙 先生 参与 内 容 讨 论 和 审核 。 感 谢 我 们 的 家 人 体谅 我 们 的 忙碌 ,以 及 对 我 们 
的 关心 和 照顾 ,使 我 们 能 抽出 这 么 多 时 间 , 投 入 全 部 精力 专心 编写 此 书 。 


2014 年 1 月 于 北京 
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为 iOS 平台 做 用 户 体 验 设计 


经 第 有 人 这 样 问 我 : 想 设 计 一 个 iPhone 上 的 移动 应 用 ,应 该 怎样 入 手 ” 用 什么 软件 ? 
ALEI A AI s 这 些 问 题 确实 让 我 有 些 犯 难 。 并 不 是 我 没 法 回答 他 们 ,而 是 这 些 问 题 
有 反映 出 他 们 对 移动 应 用 设计 实在 是 一 无 所 知 。 我 们 要 清楚 ,为 移动 平台 设计 应 用 程序 , 绝 不 
是 心血 来 滑 . 想 做 就 能 做 的 事情 。 如 采 仅 仅 是 为 了 填补 一 下 目 己 的 设计 业务 领域 的 空 日 ,或 
是 满足 一 下 目 己 ”IT 时 代 BIB E TS TR , 那 还 是 适可而止 吧 。 

真正 面 对 一 个 成 丈 的 应 用 设想 ,或 一 个 实 实 在 在 的 项 目 时 ,我 们 需要 考虑 的 绝 不 是 上 述 
问题 ,而 要 考虑 的 是 你 的 应 用 将 要 面 对 什 么 样 的 用 户 群 体 ? 是 否 适合 在 移动 设备 上 运行 ? 
能 否 适 应 相应 移动 平台 的 规范 ?这 个 应 用 到 压 能 给 用 户 市 来 什么 ?……… 我 们 所 面 对 的 工 
作 , 绝 不 仅仅 是 针对 视觉 和 感官 上 的 设计 ,而 是 移动 应 用 的 用 户 体验 设计 。 想 要 得 到 完美 的 
设计 结果 ,也 绝 不 是 普通 的 设计 师 能 够 做 到 的 ,我 们 将 要 成 为 的 是 名 副 其 实 的 用 户 体 验 设 
计 师 。 

















1.1 成 为 用 尸体 验 设计 师 








每 当 打 开 手 机 或 平板 电脑 ,看 着 一 款 款 精美 时 尚 、 高 效 实用 的 应 用 产品 的 时 候 , 心 里 不 
fe zx BRE. 这 要 是 我 的 作品 该 多 好 啊 ! 然而 ,每 个 精彩 的 移动 应 用 背后 ,都 汇集 了 大 量 的 工 
作 , 经 历 烦琐 的 步骤 ,耗费 售 人 的 时 间 和 精力 。 单 靠 一 个 人 的 工作 几乎 不 可 能 ,大 部 分 情况 
下 都 是 一 个 甚至 多 个 团队 的 合作 。 因 此 ,本 节 要 对 移动 应 用 的 设计 工作 做 一 个 系统 的 概括 
FURIA o 





1.1.1 UI,ID,UE fil GUI 


在 网 页 和 应 用 设计 领域 中 ,经 常会 听 到 人 们 用 这 些 英 文 缩写 描述 设计 工作 。 那 么 它们 
各 自 代 表 什 么 含义 ? 具体 的 工作 、 方 向 和 区 别 是 什么 呢 ? 
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完 来 看 看 它们 的 英文 全 称 和 基本 定义 : 

UICUser's Interface): 用 户 界 面 ,是 指 对 应 用 软件 的 操作 逻辑 、 人 机 交互 、 界 面 美观 的 
整体 设计 。 从 20 世纪 80 年 代 起 ,这 个 概念 成 为 了 计算 机 科学 的 正式 学 科 。 在 设计 理念 上 ， 
UI 设 计 不 仅 是 让 软件 变 得 有 个 性 有 品味 ,还 要 让 软件 的 操作 变 得 和 舒适、 简单 .自由 ,充分 体 
现 软件 的 定位 和 特点 。 

IDCInteraction Design): 交互 设计 ,又 称 互动 设计 ,考虑 的 是 人 、 环 境 与 设备 的 关系 和 
行为 ,以 及 传达 这 种 行为 的 元 素 的 设计 。 这 个 解释 有 点 难 懂 , 简 单 地 说 ,进行 交互 设计 ,就 是 
为 了 让 产品 更 易 用 有效, 让 人 使 用 产品 时 感到 和 舒适。 同时 , 它 需 要 了 解 用 户 和 他 们 的 期 望 ， 
了 解 用 户 在 同 产品 交互 时 彼此 的 行为 ,以 及 "人 ?本 身 的 心理 和 行为 特点 。 交 互 设 计 还 涉及 
人 体 工 程 学 ,心理 学 `. 生 物 学 等 多 个 学 科 , 以 及 和 多 领域 人 员 的 沟通 。 

UE( User Experience): 用 户 体验 ,也 简写 为 UX, 它 要 求 设计 师 能 够 全 面 地 分 析 和 体察 
用 户 在 使 用 某 个 系统 时 候 的 感受 。 他 的 工作 从 开发 的 最 早期 就 开始 ,并 贯穿 始终 。 目 的 是 
保证 用 户 对 产品 的 体验 有 正确 的 预 估 ,了 解 用 户 的 真实 期 望 和 目的 ,并 对 功能 核心 设计 进行 
修正 ,保证 功能 核心 同人 机 界面 之 间 的 协调 工作 。 

GUICGraphical User Interface): 图 形 用 户 界 面 , 是 指针 对 采用 图 形 方式 显示 的 操作 环 
境 用 户 接 口 进行 设计 。 其 实 就 是 界面 美工 ,只 关心 界面 的 美观 和 有 关 视 党 方面 的 设计 工作 。 

从 上 面 各 项 设计 工作 的 概念 来 看 ,UI 的 概念 比较 广泛 , 既 包 含 了 软 人 硬件 设计 ,也 嘻 括 其 
他 各 项 设计 的 部 分 内 涵 。 而 GUI 设计 比 UI GGT 7E . 目前 国内 大 部 分 的 UI 设计 师 其 实 
做 的 是 GUI, 他 们 大 多 出 自 美术 院 校 。ID 设计 简单 地 讲 只 是 指 人 和 计算 机 之 间 的 互动 过 
程 , 目 前 一 般 是 软件 工程 师 在 做 。 而 UE 设计 从 人 简单 理解 上 ,关注 的 是 用 户 的 行为 习惯 和 心 
理 感受 ,就 是 琢 茵 人 会 怎么 用 软件 或 者 硬件 才 觉 得 顺心 就 手 。 但 是 ,有 关 用 户 体验 这 一 谍 题 
的 确切 定义 .框架 及 其 要 素 还 在 不 断 发 展 和 革新 。 

现在 通过 一 则 国外 的 UE 设计 师 招 聘 要 求 ,来 看 看 现在 的 用 户 体验 设计 师 需 要 处 理 的 
工作 内 容 ( 见 图 1-1). 

面 对 这 份 招聘 启事 ,实际 上 我 会 和 大 家 有 同感 , 它 的 业务 跨度 相当 大 ,条 件 也 近乎 于 苛 
刻 , 不 是 吗 ? 我 们 不 但 要 了 解 编程 工作 ,还 要 善于 图 形 设计 ; 不 但 要 有 组 织 和 测试 能 力 ,还 
要 善于 沟通 ; 不 但 要 掌握 各 种 图 像 软件 ,还 得 是 个 绘画 、 制 图 的 高 手 。 看 来 , 想 要 成 为 真正 
的 用 户 体 验 设 计 师 比 想 象 的 要 难 一 些 。 但 是 仔细 分 析 一 下 ,不 难得 出 一 个 结论 ,未 来 的 用 户 
体验 设计 师 就 是 要 具备 用 户 界 面 设计 、 交 互 设计 、 图 形 美术 设计 以 及 以 用 户 为 中 心 的 原型 测 
试 能 力 的 全 能 型 设计 人 才 。 这 也 是 我 们 撰写 这 本 著作 的 原因 ,我 们 的 目标 就 是 要 从 和 零 开始 
伴随 大 家 逐步 成 为 10S 移动 应 用 的 用 户 体验 设计 师 。 
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我 们 正在 寻找 一 名 高 级 用 户 体验 设计 师 加 入 产品 设计 团队 ,负责 产品 创新 . 界面 视觉 引导 以 及 
原型 设计 ,并 与 开发 者 一 起 推动 设计 实现 ,我 们 需要 你 可 以 独立 工作 ,和 团队 成 员 合作 , 交流 各 种 想 


法 , 画 出 原型 .参与 产品 整个 周期 ， 





m 基于 人 机 交互 . 图形 化 设计 .界面 设计 和 其 
他 相关 理论 进行 设计 。 

m 画 出 不 同 层次 的 原型 ， 纸 上 的 . 框架 的 . 可 
交互 的 网 页 以 及 Flash 的 。 

m 到 不 同 的 部 门 演示 概念 和 想法 ， 组 织 反馈 
意见 ， 

m 生成 视觉 元 素 , 比如 icon, 边框 . 用 户 控件 ， 
窗口 规范 和 图 形 化 的 布局 。 

a 辣 产品 设计 团队 合作 去 发 展 一 些 重 要 的 . 
有 附加 值 的 概念 ,以 及 修订 产品 。 

m 间 商 业 方 面 的 专家 . 市 场 部 沟通 , 确认 设计 
并 得 到 认可 。 

n 同 开发 人 员 沟 通 ， 提 供 明确 的 定义 和 执行 
的 方向 。 

m 同 质量 控制 部 门 沟通 ， 提 供 在 测试 阶段 需 
要 的 清晰 理解 。 

m 同 首席 设计 师 和 产品 设计 团队 一 起 工作 ， 
使 其 设计 符合 内 部 设计 流程 和 标准 。 

m 需要 1/10 的 时 间 出 差 . 





m 在 应 用 程序 的 交互 设计 方面 (界面 设计 和 
产品 设计 ) 有 4~5 年 的 工作 经 验 ， 在 Web 
应 用 和 桌面 应 用 方面 有 扎实 的 经 验 。 

m 设计 . 人 机 交互 . 可 用 性 相关 专业 , 或 者 具 
有 展示 对 设计 的 理解 .交互 设计 理论 和 实 
践 的 能 力 。 

m 理解 产品 设计 的 生命 周期 。 

e 优秀 的 交流 技巧 : 书写 和 口头 。 

m 了 解 基于 浏览 器 和 客户 端的 技术 (HTML, 
Java. Flash 和 .NET), 

m 原型 技术 ， 包 括 DHTML, Dreamweaver 和 
Flash 等 

m 具有 开发 和 运行 可 用 性 测试 的 经 验 ， 

m 具有 行业 研究 经 验 (Cooper 的 目标 导向 设 
计 方 法 优先 )， 

m 无 论 是 独立 工作 还 是 和 团队 一 起 ,都 可 以 
使 用 设计 过 程 描述 , 清楚 问题 如 何 产 生 以 
及 如 何 解 决 。 

m 可 以 创造 出 图 形 元 素 : icon, 控件 . 窗口 . 
边框 和 数据 布局 ， 


图 1-1 UE 设 计 师 招聘 要 求 


1.1.2 了 解 ios ER 


我 们 的 应 用 是 针对 ioOS 平 人 台 设 计 并 实现 的 ,那么 在 此 之 前 ,我 们 必须 对 10S 平 合 旋 至 
所 有 的 移动 平 侣 有 一 个 了 解 。 所 谓 移动 平台 ,就 是 移动 设备 上 的 操作 系统 , 安 儿 各 个 应 用 程 
序 的 载体 。 由 于 最 初 主 要 是 建立 在 移动 通信 功能 的 基础 上 ,因此 义 称 为 移动 通信 平台 ,一 般 
由 移动 终 闪 .移动 通信 网 络 .数据 中 心 组 成 。 移 动 终 妆 主要 指 智 能 手机 .平板 电脑 便携式 计 
算 机 等 。 移 动 通信 网 络 包 括 电 信 通 信 网 络 和 移动 互联 网 。 数 据 中 心 一 般 由 信息 平台 .用户 
管理 平台 和 中 心 数 据 库 组 成 。 
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目前 ,市 场 上 的 移动 平台 种 类 很 多 ,但 最 主流 的 主要 有 三 个 ,也 就 是 伴 果 公司 的 10S 平 
台 、Google 公司 的 Android 平台 和 微软 公司 的 Windows Phone 平 台 , 我 们 统称 为 三 大 平台 
CBI 1-2), Android 平台 目前 的 最 新 版 本 是 Android 4. 3C X. Ek ^ & Vg E”), Windows 
Phone 平台 目前 的 最 新 版 本 是 Windows Phone 8。 当 然 , 移 动 设 备 的 系统 操作 平台 绝 不 仅 
仅 这 三 种 ,我 们 熟知 的 还 包括 Blackberry”“Palm”“ 塞 班 >” 和 ”Windows Mobile” 等 。 但 是 
在 上 述 的 三 大 平台 面前 ,它们 的 市 场 占 有 率 和 设备 的 保有 量 相 对 较 低 ,甚至 已 经 被 淘汰 出 


局 ,因此 本 书 不 册 介 绍 。 


iOS 7 Android 4.3 Windows Phone 8 
图 1-2 移动 应 用 的 三 大 平台 











iO0S 平 台 是 由 美国 的 人 苹果 公司 开发 的 移动 设备 操作 系统 。 苹 果 公 司 最 时 在 2007 年 
1 月 9 日 的 Macworld 大 会 上 公布 了 这 个 系统 ,最 初 是 设计 给 iPhone 手机 使 用 的 ,因此 当时 
命名 为 iPhone OS ,后 来 陆续 套用 到 iPod touch,iPad 以 及 iPad mini 等 苹果 移动 产品 上 ， 
2010 年 6 月 7 日 WWDC 大 会 上 宣布 改名 为 1OS( 见 图 1-3). 





图 1-3 iOS 以 及 10S5 I iOS 6 的 标志 


iOS 平台 的 发 展 是 三 大 平台 中 最 成 功 也 是 最 稳健 的 。2011 年 10 月 4 日 ,苹果 公司 宣 
iOS 平台 的 应 用 程序 已 经 突破 50 万 个 。2012 年 2 月 ,应 用 总 量 达 到 552 247 个 ,其 中 游戏 
应 用 最 多 ,达到 95 324 个 ,比重 为 17. 26% ;书籍 类 以 60 604 个 排 在 第 二 ,比重 为 10. 97%; 
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娱乐 应 用 排 在 第 三 ,总 量 为 56 998 个 ,比重 为 10. 32206, 2012 年 6 月 ,苹果 公司 在 WWDC 
2012 上 宣布 了 iOS 6, 提 供 了 超过 200 项 新 功能 。 

iOS 6 拥有 许多 非常 优秀 的 应 用 和 功能 ,例如 : 以 全 新 角度 呈现 的 地 图 应 用 ,可 以 通过 
语音 来 发 送信 息 Siri 功能 , 带 有 1Cloud 超 强 分 享 功 能 的 照片 浏览 应 用 ,高 效 管理 和 使 用 各 
种 票据 .卡片 的 Passbook,FaceTime 视频 电话 ,全 新 的 邮件 功能 和 Safari 网 络 浏览 器 等 。 
更 多 的 应 用 程序 .影音 文件 及 书刊 报纸 可 以 通过 OS 官方 的 应 用 商店 iTunes Store, App 
Store 和 iBookstore WA FRZ. Mi iCloud ,用户 的 预览 历史 记录 会 在 你 所 有 的 设 
备 上 保持 更 新 。 因 此 ,用 户 可 以 在 iPhone 上 开始 购物 ,然后 在 iPad 上 继续 而 不 必 退 出 使 用 
中 的 应 用 。 

在 2013 年 6 月 10 日 的 WWDC 上 , 平 末 公 司 发 布 了 iO0S 7( 见 图 1-4)。 它 在 i9S 6 的 基 
础 上 有 了 很 大 的 改进 ,不 仅 采 用 了 全 新 的 应 用 网 标 , 还 重新 设计 了 内 置 应 用 、 锁 屏 界 面 以 及 
通知 中 心 等 。iOS 7 还 采用 了 AirDrop 作为 分 吝 的 方式 之 一 并 改进 了 多 任务 能 

















图 1-4 iOS 7 的 标志 


iOS 的 用 户 界 面 是 非常 严谨 ,同时 寓 有 创新 精神 ( 见 图 1-5)。 界 面 可 以 使 用 多 点 触 控 耳 
接 操 作 。 控 制 方法 包括 滑动 、. 轻 触 开 关 及 按键 。 与 系统 的 交互 包括 各 种 手势 ,例如 滑动 、 轻 
按 、 挤 压 及 旋转 。 此 外 ,通过 其 内 置 的 加 速 器 ,可 以 在 竖 屏 和 横 屏 之 间 切 换 , 这 样 的 设计 使 
iOS 平台 的 移动 设备 更 便于 使 用 。 屏 幕 的 下 方 有 一 个 主屏 幕 CHome) 按 键 , 屏 幕 的 底部 则 是 
SER E R RIED RJ Dock 应 用 启动 平台 ,用 户 可 以 将 经 向 使 用 的 程序 的 图 标 在 Dock E [i] 
定 4 个 GPad 上 可 增 至 6 个 )。 屏 幕 上 方 是 状态 栏 ,能 显示 时 间 、 电 池 电 量 和 信号 强度 等 相 
关 数 据 。 其 余 的 屏幕 面积 用 于 显示 当前 的 应 用 程序 。 局 动 iPhone 应 用 程序 的 唯一 方法 就 
JE TE DE r M E h ATEST Ay RPR o iB H FEJT M Et T eR e AA Home 键 (iPad 可 使 用 
五 指 捏合 手势 回 到 主屏 幕 )。 当 第 三 方 软件 收 到 了 新 的 信息 时 ,Apple BSJI 25 s 36 3E. xx 2838 
知 推送 至 iPhone,iPad 或 iPod Touch 上 ,不管 它 是 否 正 在 运行 中 。 在 iPhone 上 ,许多 应 用 
程序 之 间 无 法 直接 调用 对 方 的 资源 。 然 而 ,不 同 的 应 用 程序 仍 能 通过 特定 方式 分 享 同 一 个 
HB. 


iOS 是 三 大 平台 中 最 具有 创新 优势 的 移动 平台 ,而 且 每 款 应 用 都 很 精美 。 这 是 因为 苹 
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状态 术 
ele 
inc a * 
um c | = “a - L 
Sort & c Dock 
E B£ &&(Home) 





图 1-5 iOS 平 台 的 用 户 界 面 特点 (从 左 至 右 分 别 为 iPhone5,iPad4,iPad mini) 


果 公 司 为 第 三 方 开发 者 提供 了 丰富 的 工具 和 API, 从 而 让 他 们 设计 的 应 用 能 充分 利用 每 音 
IOS 设备 缠 含 的 先进 技术 。 所 有 应 用 都 集中 在 一 处 ,只 要 使 用 你 的 Apple ID 即 可 轻松 访 
问 、 搜 索 和 购买 这 些 应 用 。iCloud 可 以 存放 照片 .应 用 、 电 子 邮 件 、 通 讯 录 、 日 历 和 文档 等 内 
容 , 并 以 无 线 方式 将 它们 推送 到 用 户 所 有 的 设备 上 。 如 果 用 户 用 iPad 拍摄 照片 或 编辑 日 历 
事件 ,iCloud 能 确保 这 些 内 容 也 会 出 现在 用 户 的 Mac, iPhone 和 iPod touch 上 而 无 需 你 进 
行 任何 操作 。 


1.1.3 了 解 成 功 的 iOS v Hz W S I 


无 论 你 是 否 丰 的 准备 好 设计 并 开发 一 蒜 10S 平台 的 移动 应 用 ,现在 我 们 需要 对 放松 一 
下 ,细心 观摩 儿 球 成 功 的 移动 应 用 用 户 体 验 设计 案例 ,这 对 于 我 们 加 深 对 这 门 学 科 的 认识 ， 
提高 我 们 人 研究 它 的 兴趣 ,以 及 对 它 设计 理念 的 深入 理解 都 是 非常 有 帮助 的 。 

首先 来 看 看 IOS 平台 的 “Passbook”( 见 图 1-6), 

自从 10S 6 一 上 市 “Passbook” 就 以 它 独特 的 支付 功能 和 超凡 的 用 户 体 验 设 计 博 得 了 
大 众 的 眼球 。 它 是 苹果 公司 于 2012 年 6 月 12 日 的 全 球 开发 者 大 会 (WWDC) 上 宣布 的 ,并 
fg IOS 6 系统 上 提供 操作 的 一 个 全 新 应 用 。 这 是 一 于 可 以 存放 优惠 养 、 会 员 卡 和 电影 票 的 
移动 应 用 。 它 整合 了 来 日 各 类 服务 的 票据 ,包括 电影 票 、 登 机 脾 、 积 分 卡 和 礼品 卡 等 。 这些 
票据 将 被 显示 在 锁 屏 屏 硕 上, 当 用 户 走 到 相关 商店 或 场所 附近 时 ,通过 定位 功能 ,对 应 的 票 
据 将 会 被 和 目 动 显示 。 在 这 个 大 多 数 印刷 品 都 开始 数码 化 的 年 代 , 使 用 电子 优惠 券 或 电子 机 
票 其 实 是 很 平常 的 事 。 

Passbook 的 男 一 个 独特 功能 在 于 它 能 够 自动 显示 附近 商家 的 会 员 卡 和 优惠 券 等 信息 ， 
例如 , 当 你 经 过 必胜客 时 ,Passbook 就 会 弹出 一 条 信息 提醒 你 必胜客 就 在 附近 ,你 可 以 使 用 
相关 的 必胜客 优惠 券 和 礼券 等 。Passbook 还 文 持 各 种 信息 的 实时 更 新 ,如 果 登 机 牌 上 的 航 
班 出 现 延迟 , 它 会 自动 通知 用 户 。 此 外 ,如 果 不 想 再 使 用 Passbook 管理 某 一 种 电子 票 券 JE 
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图 1-6 i1OS 平 台 的 “Passbook” 





么 用 户 也 可 以 随心 所 和 欲 将 这 些 电子 票 券 从 Passbook 里 “销毁 ”。 

作为 10S 6 的 原生 应 用 ,从 视觉 设计 上 我 们 也 可 以 鲜明 地 体会 到 Passbook 强烈 的 拟 物 
化 风格 体现 : 人 硬 纸 卡片 . 手 撕 边 绿 、 层 著 效 果 以 及 通 真 的 碎 纸 机 动画 。 所 有 的 细节 都 散发 着 
设计 师 精 到 的 细节 刻画 和 仿真 制作 工艺 。 
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再 来 看 看 著名 的 微 博 和 交友 应 用 10S 版 “Circle”( 见 图 1-7)。 
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图 1-7 1OS Æ & fy Circle" 


作为 2012 年 刚刚 出 现 的 新 事物 ,“Circle” 成 为 了 非常 热门 的 情境 感知 地 理 位 置 服务 行 
业 的 应 用 ,由 Likealittle 公司 打造 ,其 葛 争 对 手包 括 Highlight, Banjo, Meetup FI ix WE 
Facebook 收购 的 Glancee。 有 用户 可 从 应 用 商店 中 下 载 Circle, 然 后 通过 Facebook Connect 
XE A, Circle 会 从 Facebook 目 动 提取 你 的 工作 和 教育 背景 信息 ,并 添加 到 Circle 网 络 中 。 
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在 “周围 的 人 ”中 ,你 可 以 看 到 自己 的 地 理 位 置 、 周边 的 Facebook 好 友 以 及 分 享 同 个 社交 网 
络 的 用 户 。Circle 只 会 显示 处 于 同 个 社 群 组 里 的 用 户 , 比 如 校友 群 、 工 作 群 和 朋友 的 朋友 ， 
当然 ,用 户 也 可 以 自行 关闭 挥 此 显示 功能 。 
“Circle” 用 户 还 可 以 设置 显示 朋友 地 理 位 置 的 物理 距离 范围 ,从 几 步 之 遥 到 无 限 大 的 距 
离 都 可 以 。 和 Highlight 类 似 的 是 ,用 户 不 能 关闭 地 理 位 置 更 新 的 功能 ; 但 是 和 Highlight 
不 同 的 是 ,用 户 可 以 通过 设置 过 滤 掉 某 些 用 户 、 对 某 些 朋友 或 群 组 中 的 某 些 用 户 关 闭 掉 提 酝 
功能 ,也 可 以 在 每 个 个 人 网 络 中 设置 成 对 其 隐 喘 (比如 当 你 不 想 让 同事 们 知道 上 班 时 间 你 正 
在 商场 闲逛 ) 。 
值得 一 提 的 是 ,“Circle” 应 用 在 IOS 平台 上 最 新 版 的 扁平 化 ?4 设计 风格 ,不 但 顺应 了 10S 
7 全 新 的 设计 思路 和 理念 ,而 且 极 大 地 增强 了 应 用 本 身 的 时 尚 味道 和 个 性 ,同时 ,能 够 根据 
环境 而 变换 底 色 的 视觉 体验 相当 的 出 色 。 
最 后 为 大 家 介绍 的 ,是 著名 的 美国 彩色 对 开 日 报 4USA Today) CC H 3S BO fe 10S 平 
台 设 备 iPad 上 的 移动 客户 端 ( 见 图 1-8). 
《今日 美国 ?于 1982 年 9 月 创刊 , 且 至 今 为 止 一 直 保 持 着 彩色 版 面 \ 消 息 集中 、 多 用 图 
d .重视 体育 报道 、 便 于 读者 迅速 获得 所 需 信息 等 特点 而 吸引 着 谈 者 。 进 入 移动 互联 网 时 代 
的 今天 ,《 今 日 美国 ) 仍 然 保 持 着 各 方面 的 领先 优势 。 归 纳 起 来 ,《 今 日 美国 ) 作 为 全 新 的 移动 
数码 报纸 主要 有 以 下 四 大 特点 。 
e HA: 专门 开辟 了 “美国 各 地 ”和 “世界 新 闻 摘 要 ”专栏 ,便于 读者 从 这 一 份 报纸 
上 了 解 美 国 各 地 及 世界 上 的 重大 新 闻 。 

E 动态 天 气 : 仿效 电视 气象 预报 形式 ,首创 了 用 彩色 气象 图 表 报 道 美国 50.100 
多 个 主要 城市 3 天 天 气 的 趋势 。 

m 界面 美观 : 独创 了 使 用 生动 的 图 片 和 图 表 为 主 的 新 闻 报 道 , 图 文 并 成 ,形式 美观 , 提 
高 了 读者 的 读 报 欲望 和 兴 

m 文字 精练 : 它 注重 使 用 简洁 明快 的 报道 文体 ,偏爱 使 用 短 句 、 短 字 来 浓缩 文 草 , 有 了 时， 
一 两 句 话 就 构成 了 一 条 新 闻 ,这 样 就 充分 节省 了 篇 幅 , 便 于 登载 尽 可 能 多 的 信息 ,以 
突出 其 综合 性 大 报 的 特点 。 

当今 , 纸 质 读 物 已 经 渐渐 地 被 电子 读物 所 蔡 代 ,尤其 作为 新 闻 媒 体 的 报纸 ,从 信息 量 到 
更 新 速度 上 更 是 远 远 不 如 各 大 新 闻 门 户 网 站 和 客户 端 , 因 此 ,主流 的 新 闻 企 业 都 在 抓紧 发 布 
自己 的 移动 设备 客户 端 。 在 图 1-8 中 我 们 可 以 欣赏 到 《今日 美国 ) 在 iOS 平台 iPad 设备 上 
的 移动 客户 端的 最 新 设计 。 它 把 1OS 传统 的 界面 风格 进行 了 扁平 化 的 改造 ,以 适应 最 新 的 
iOS 7 的 视觉 风格 。 同 时 ,完全 继承 了 传统 的 优势 ,并 以 高 纯度 的 色彩 进行 清晰 、 人 鲜明 的 分 
类 ,是 一 球 精 彩 的 , 带 有 浓郁 苹果 味道 的 用 户 体 验 设 计 。 

以 上 分 别 向 大 家 介绍 了 IOS 两 类 移动 设备 上 风格 各 异 的 三 球 经 典 的 应 用 设计 。 目的 
是 让 大 家 对 移动 应 用 .用户 体验 设计 以 及 全 新 iOS 扁平 化 设计 理念 有 一 个 比较 直观 的 认 知 






























































O 局 平 化 设计 的 概念 参考 2. 3. 1 5, 
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USATODAY Eor iPad 





图 1-8 iPad 平台 上 的 “USA Today" 
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和 了 解 。 接 下 来 下 入 主题 ,要 针对 OS 平台 的 应 用 进行 用 户 体 验 设 计 。 首 先 , 我 们 必须 清 
楚 这 项 工作 的 基本 流程 和 各 个 环节 的 目标 及 关系 。 


1.2 用 尸体 验 设计 的 基本 流程 


对 于 传统 的 设计 师 , 包 括 用 户 界 面 或 交互 设计 师 来 说 ,移动 应 用 的 用 户 体 验 设 计 是 一 个 
全 新 的 设计 领域 。 用 户 在 其 他 形式 的 图 形 设 计 中 积 崇 的 经 验 是 很 难 应 用 到 移动 设备 界面 上 
的 。 作 为 设计 师 ,我 们 的 主要 工作 就 是 完成 应 用 的 高 保 真 原型 。 所 谓 产 品 原型 ,就 是 在 设计 
过 程 中 为 了 检验 设计 结果 而 制作 的 “模型 ”, 当然 这 个 “模型 "不 是 立体 的 ,而 是 一 个 可 以 作为 
应 用 的 替代 品 平面 效 末 图 。 我 们 可 以 分 阶段 把 它 制 作成 纸 面 的 草图 .平面 的 图 像 文件 以 及 
沉 有 交互 效果 的 可 执行 文件 。 产 品 原 型 可 以 帮助 我 们 进行 产品 方案 展示 、 可 用 性 测试 和 修 
改 . 己 甲 方 或 用 户 沟通 以 及 与 开发 人 员 沟 通 。 

现在 ,我 们 通过 移动 应 用 用 户 体验 设计 的 工作 流程 ,来 了 解 一 下 这 门 学 科 所 涉及 的 知识 
领域 和 经 验 要 求 ,这 也 对 移动 应 用 设计 的 初 竺 者 极 有 帮助 ,可 以 更 加 明确 、 系 统 地 规划 日 己 
的 知识 体系 以 及 经 验 、 素 材 的 积累 。 


1.2.1 设计 的 前 期 工作 


这 部 分 的 工作 主要 是 对 设计 进行 前 期 铺垫 ,以 及 对 应 用 的 概念 和 功能 进行 规划 和 设想 。 

1. 市 场 调查 

在 开始 设计 之 前 ,我们 必须 了 解 很 多 事情 。 首 先 要 确定 你 的 创意 还 没有 人 做 过 ,如 采 发 
现 已 经 有 类 似 的 应 用 (这 当然 很 难免 ) ,那么 你 就 需要 比 它 做 得 更 好 ,而 且 具 有 更 多 独特 的 优 
化 设计 。 最 有 效 的 调查 方式 是 到 各 大 平台 的 移动 商店 上 搜索 已 有 的 应 用 程序 。iOS 的 应 用 
一 律 在 1Tunes Store 上 搜索 ( 见 图 1-7); Android 平台 由 于 其 开放 性 造成 了 网 络 上 出 现 各 种 
五 花 八 门 的 应 用 商店 ,我 推荐 大 家 还 是 在 官方 的 Google Play 里 搜索 ,因为 它 的 内 容 比较 全 
面 ,分 类 也 比较 系统 ; Windows Phone 的 应 用 可 以 在 Windows Phone 官网 的 App 十 Game 
里 搜索 。 

2. 功能 定位 

我 们 还 需要 对 自己 的 想法 和 目标 功能 有 个 明确 的 定位 ,这 对 后 续 的 设计 工作 很 重要 , 它 
决定 了 整个 应 用 的 设计 要 点 。 建 议 开 发 者 在 定位 时 尽量 有 所 偏重 ,也 就 是 目标 比较 专 一 、 功 
能 比较 独特 ,这 样 的 应 用 比较 容易 做 出 自己 的 个 性 而 吸引 用 户 , 具 体 的 描述 可 以 参看 第 
3 4, 

3. HP E 

用 户 分 析 主 要 是 通过 对 应 用 的 用 户 及 用 户 群 体 的 分 析 和 了 解 ,来 确定 应 用 的 核心 功能 。 
这 一 步 嗓 对 于 整个 应 用 设计 是 极端 重要 的 。 在 设计 的 前 期 阶段 ,最 容易 出 现 的 就 是 对 功能 
取舍 的 争论 ,团队 里 的 每 一 个 成 员 虱 会 提出 各 种 功能 需求 设想 ,也 很 容易 陷入 到 某 一 个 具体 
功能 中 。 建 议 开 发 者 借助 “问卷 调查 ”和 “现场 调查 ”的 方式 来 解决 ,具体 方法 可 参看 第 3 章 
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1.2.2 gj x& MUR M AE 


1. 产品 创意 

通过 设计 的 前 期 工作 ,我 们 得 到 了 比较 明确 和 清晰 的 设计 方向 和 计划 ,但 是 面 对 实 
实在 在 的 项 目 , 应 该 如 何人 手 开 始 设计 并 把 它 实现 出 来 的 过 程 , 这 需要 很 强 的 想象 力 和 创造 
力 。 我 们 的 目标 是 开发 出 有 价值 的 和 有 特色 的 独树一帜 的 应 用 产品 ,这 需要 在 设计 工作 
的 前 期 进行 大 量 的 思考 和 创意 。 我 们 的 方式 是 借助 头脑 风暴 来 解决 ,具体 方式 可 以 参看 
第 4 章 。 

2. 绘制 原型 草图 

并 不 是 所 有 的 问题 考虑 清楚 ,就 可 以 打开 计算 机 进行 图 形 界面 设计 其 至 编写 代码 了 ,在 
进入 具体 设计 制作 之 前 ,需要 在 纸张 上 勾 划 出 应 用 的 原型 草图 。 目 的 是 通过 铅笔 在 纸张 上 
把 应 用 的 功能 点 、 操 作 流 程 、 界 面 布 局 以 及 交互 元 素 进行 一 次 实际 的 演习 。 去 际 多 余 或 不 合 
理 的 因素 ,加 强 应 用 的 核心 功能 ( 见 图 1-9). 




















图 1-9 手绘 原型 草图 


1.2.3 计算 机 原型 的 制作 及 可 用 性 测试 


所 谓 的 计算 机 原型 就 是 在 计算 机 上 进行 应 用 的 图 形 界 面 设计 ,不 需要 过 多 的 细 市 修饰 ， 
只 是 把 纸 面 上 的 草 图 数字 化 ,以 便 在 计算 机 上 不 断 的 改进 和 补充 。 

1. 选择 布局 和 导航 方式 

把 应 用 设计 从 纸 面 上 移动 到 计算 机 软件 上 的 过 程 中 ,需要 对 几 个 重要 的 环 市 进行 细 化 ， 
第 一 个 就 是 选择 好 界面 的 布局 以 及 合理 的 导航 方式 ,这 和 直接 影响 到 应 用 在 使 用 和 操作 过 程 
中 页 面 跳 转 的 清晰 流畅 和 调理 性 。 我 们 将 在 第 5 章 详 细 介 绍 iOS 平台 处 理 相 关 问 题 的 思 
路 和 规范 。 

2. 设置 控件 和 界面 元 素 

界面 的 布局 得 当 后 ,就 要 对 界面 上 的 细 市 元 系 进 行 细 任 的 设计 、 排 版 和 调整 六 。 这 个 过 
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程 对 设计 师 的 图 形 把 握 能 力 和 构图 能 力 要 求 比较 高 , 它 可 不 是 简单 把 这 些 元 床 拼 次 在 界面 
上 就 完成 了 ,而 是 要 考虑 很 多 的 相关 问题 。 包 括 上 一 步 的 导航 和 布局 在 内 ,我 们 都 要 对 应 用 
的 交互 方式 、 人 体 工 程 学 以 及 视觉 的 整体 协调 感 进 行 反 复 的 调整 。 

3. 可 用 性 测试 

这 是 移动 应 用 的 用 户 体验 设计 中 期 非常 重要 的 步骤 。 将 设计 好 的 应 用 原型 输入 移动 设 
备 的 相册 里 ,或 者 使 用 Xcode 制作 成 可 进行 简单 的 页 面 间 跳 转 的 交互 程序 。 寻 找 一 些 团队 
以 外 的 人 员 尝 试看 使 用 一 下 ,观察 他 们 的 使 用 情况 并 进行 记录 和 分 析 。 以 此 来 测试 应 用 布 
局 .导航 和 控件 位 置 的 合理 性 和 操作 的 体验 感 ( 见 图 1-10). 














图 1-10 应 用 的 可 用 性 测试 


1.2.4 ”高保 真 原型 及 设计 的 完成 阶段 


虽然 我 们 得 到 了 一 个 比较 完善 的 设计 结果 ,但 是 我 们 的 应 用 原型 依然 是 一 个 中 间 状 态 ， 
它 不 美观 . 没 个 性 ,无 法 吸引 用 户 来 尝试 和 使 用 ,因此 需要 进一步 的 创意 和 修饰 。 

1. 个 性 化 设计 

个 性 化 设计 是 大 部 分 设计 师 最 喜欢 的 步 又 ,我 们 在 低 保 真 原型 的 基础 上 对 应 用 的 界面 
进行 色彩 图形 细节 、 字 体 和 特效 上 的 修饰 和 创意 。 发 挥 你 天 才 般 的 想象 力 , 充 分 展现 应 用 
的 个 性 和 魅力 ,使 用 户 一 打开 你 的 应 用 就 会 爱不释手 。 第 8 章 会 由 浅 和 次 地 和 大 家 一 起 探 
索 应 用 界面 个 性 化 设计 的 思路 和 方法 。 

2. 图 标 设计 

图 标 设计 是 画龙点睛 的 环 市 ,发 挥 你 超 长 的 造型 能 力 和 软件 技巧 ,为 应 用 设计 一 幅 既 迷 
人 、 又 有 视觉 冲击 力 的 面孔。 让 它 无 论 在 移动 加 面 上 ,还 是 在 应 用 商店 的 贷 染 上 都 能 够 吸引 
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眼球 。 同 时 ,也 不 能 忽视 应 用 界面 上 的 各 种 栏 图 标的 设计 ，。 

3. 交付 开发 者 

最 后 ,我们 把 高 保 真 的 个 性 化 设计 结果 用 Xcode 实现 并 演示 给 开发 者 ,把 所 有 图 形 文 
件 细致 地 分 类 .打包 ,包括 完整 的 界面 设计 效果 网 都 分 别 保 存 好 ,做 上 清楚 的 标注 ,交付 给 开 
发 人 员 。 在 此 过 程 中 ,可 能 还 需要 与 开发 者 进行 沟通 ,有 些 图 形 需 要 单独 保存 或 分 割 。 

以 上 就 是 移动 应 用 用 户 体 验 设计 的 全 部 过 程 。 整 个 过 程 中 还 有 许多 的 细 市 诸如 讨论 、 
修改 和 测试 的 过 程 , 在 这 里 并 没有 阐述 。 当 然 , 在 之 后 的 草 节 将 更 加 系统 .详尽 地 进行 描述 。 
有 些 步 又 并 不 是 一 次 完成 的 ,在 设计 和 实践 的 过 程 中 ,经 稼 出 现 把 设计 给 推翻 或 反复 一 个 其 
至 几 个 步骤 ,这 是 非常 正 篆 的 。 而 且 对 原型 的 可 用 性 测试 ,建议 在 每 个 环节 完成 后 都 应 该 简 
单 地 进行 一 次 ,这 样 可 以 少 走 弯 路 。 因 此 ,以 上 这 个 流程 只 是 作为 大 家 在 设计 过 程 的 一 个 参 
考 和 依据 。 

推荐 读者 在 进行 设计 之 前 ,详细 阅读 OS 平台 的 4 人 机 界面 指南 ) 叫 , 千 万 不 要 认为 这 只 
是 给 初学 的 采 岛 看 的 “使 用 说 明 书 ”, 它 对 你 设计 的 规范 化 和 合理 性 都 会 有 极 大 的 帮助 。 


1.3 ”iOS 7 的 全 新 用 尸体 验 


苹果 在 2013 年 的 全 球 开发 者 大 会 (WWDC) 上 发 布 了 全 新 移动 操作 系统 10S 7, 这 一 版 
本 的 10S 完全 握 弃 了 过 去 的 拟 物 化 设计 风格 ,并 开始 采用 实用 性 更 高 的 遍 平 化 设计 。 对 于 
开发 者 来 说 ,这 一 全 新 游戏 规则 要 求 他 们 根据 OS 7 的 用 户 界面 而 重新 设计 自己 的 应 用 ,并 
希望 借 此 种 给 消费 者 更 加 新 鲜 、 旦 同 设 备 拥有 更 高 默契 的 应 用 使 用 体验 ，。 

所 谓 拟 物化 设计 ,就 是 在 设计 过 程 中 为 了 体现 产品 特点 和 降低 使 用 难度 ,通过 模拟 现实 
物品 的 造型 和 质感 ,对 实物 进行 再 现 , 同 时 ,交互 方式 也 可 以 模拟 现实 生活 的 交互 方式 。 而 
扁平 化 设计 ,是 以 简约 理念 为 核心 , 握 弃 高 光 、 明 影 和 透视 感 的 效果 ,通过 抽象 .人 简化、 符号 化 
的 设计 元 素来 表现 。 其 交互 核心 在 于 功能 本 号 ,所 以 去 掉 了 匈 余 的 界面 元 素 和 交互 方式 , 通 
过 图 1-11 可 以 对 这 两 个 设计 风格 进行 比较 。 当 然 , 这 只 是 对 这 两 种 设计 风格 的 简单 描述 ， 
事实 上 在 设计 过 程 中 还 需要 注意 很 多 的 细节 和 要 点 ,有 关 拟 物化 和 局 平 化 的 风格 的 设计 方 
法 会 在 第 2 RAWE. 

在 此 ,我 们 通过 一 些 案例 ,深入 理解 :OS 7 的 全 新 用 户 体 验 , 并 对 iOS 移动 应 用 的 设计 
理念 及 改造 方向 进行 分 析 和 阐述 。 

1. 追求 简约 

扁平 化 设计 风格 的 核心 理念 就 是 追求 "简约 至 上 ”, 因 此 ,比较 19S 新 旧版 本 的 视觉 印 
象 和 操作 方式 的 时 候 , 应 该 能 够 感觉 到 苹果 对 于 操作 系统 和信 洁 的 追求 已 经 到 达 了 一 个 全 新 
的 层次 。 不 仅 是 应 用 程序 图 标 和 界面 的 设计 ,i0S7 中 的 整体 设计 理念 相 比 以 往 更 加 简洁 。 


















































(D (Human Interface Guidelines》 可 以 在 苹果 的 开发 者 官网 (https://developer. apple. com) 上 找到 ,也 有 热心 的 开 
发 者 将 其 译 成 了 中 文 并 发 布 到 各 类 移动 开发 者 论坛 上 。 
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(a) 拟 物化 设计 风格 (b) 己 平 化 设计 风格 


图 1-11 iOS 的 "计算 希 ?" 应 用 设计 ( 拟 物 化 和 届 平 化 设计 风格 对 比 ) 


这 也 就 是 说 ,此 前 那些 非常 适合 OS 6 系统 的 应 用 或 许 会 令 1i0S 7 用 户 感到 过 于 复杂 甚至 
沙 后 。 当 然 ,并 不 是 说 用 户 必 须 在 应 用 开发 过 程 中 始终 亲人 循 :OS 7 的 设计 风格 ,开发 者 依然 
拥有 着 较 大 的 自由 设计 空间 ,但 是 在 把 握 视 觉 风 格 和 操作 流程 的 时 候 , 应 该 相信 苹果 公司 的 
m i. 

通过 图 1-12 可 以 发 现 ,虽然 两 个 版 本 的 “天 气 ” 应 用 在 界面 的 复杂 程度 上 变化 不 大 ,但 
是 通过 扁平 化 的 处 理 和 色彩 亮度 的 改变 ,从 视觉 上 10S 7 的 "天气 ? 应 用 更 加 的 直观 和 悦目 。 

2. 优化 层级 

扁平 化 设计 理念 的 男 一 个 重要 理念 就 是 优化 和 减少 层级 关系 。 在 10S 7 rn ERA n] 
通过 充分 利用 更 加 紧 竣 的 界面 设计 来 优化 应 用 的 层级 ,力求 操作 更 加 的 人 简便 和 下 观 。 这 样 
可 以 有 效 提升 用 户 的 使 用 效率 和 动态 感 , 因 此 为 了 使 自己 的 应 用 能 人 够 配合 10S 7 的 整体 设 
计 风 格 ,应 用 开发 者 需要 在 设计 应 用 时 将 层级 设计 融入 到 软件 的 UI 设 计 之 中 。 然 而 ,优化 
层级 并 不 等 于 使 界面 杂乱 无 草 , 应 用 开发 者 同样 需要 保证 应 用 主页 面 的 条 理 和 开放 性 。 

通过 图 1-13 对 新 旧版 本 的 “语音 备忘录 ”应 用 的 比较 可 以 发 现 , 去 挥 了 上 毫 无 实际 用 途 的 
拟 物 化 图 形 ,应 用 的 界面 多 出 了 很 大 的 空间 ,使 隐藏 的 功能 和 页 面 得 以 搬 到 台 前 。 比 如 ,用 
户 查 找 录 音 文件 不 需要 在 进入 下 一 级 页 面 , 大 大 提高 效率 的 同时 也 增加 了 更 多 的 功能 。 CH 
是 原来 制作 麦克 风 图 像 的 设计 师 将 会 失落 ,这 个 经 典 作品 肯定 花费 了 不 少 心 血 , 至 少 我 会 怀 
念 这 个 画面 !) 
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星期 日 
早期 一 x - d x 
星期 二 
e 
è 让 
XX 
更 新 于 13-4-27 17:20 








图 1-12 iOS 平台 的 “天 气 ” 应 用 ( 左 图 为 1OS 6, 右 图 为 :IOS 7) 








图 1-13 iOS 平 人 台 的 “语音 备 起 录 ” 应 用 ( 左 图 为 iOS 6, 右 图 为 10S 7) 
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3. 相互 关联 

为 了 进一步 增强 不 同 原生 应 用 之 间 的 互动 性 ,苹果 公司 已 经 开始 有 目的 性 地 降低 应 用 
程序 之 间 的 独立 性 。 而 且 ,iOS 7 的 最 大 优势 之 一 就 是 可 以 增强 应 用 程序 的 互动 性 和 可 访 
问 性 。 因 此 ,应 用 开发 者 理应 在 软件 开发 过 程 中 充分 考虑 到 自己 的 应 用 与 其 他 程序 进行 关 
联 的 可 能 。 降 低 门 槛 ,允许 其 他 应 用 调用 你 的 功能 ,也 同样 可 以 利用 其 他 应 用 ,包括 iOS 原 
生 应 用 的 优势 ,把 它们 的 功能 为 我 所 用 ( 见 图 1-14). 
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图 1-14 108 7 中 的 三 区 原生 应 用 (它们 在 操作 过 程 中 可 以 互相 调用 功能 ) 


这 样 , 以 10S 平 台 为 载体 ,应 用 与 应 用 之 间 相 互 平等 ,相互 融合 的 展 平 化 在 一 起 。 通 过 
IOS 7 全 新 的 “控制 中 心 * 和 “最 近 使 用 ”功能 的 变化 可 以 明显 感到 。 当 然 ,这 或 许 意味 首开 
发 者 需要 在 软件 开发 过 程 中 为 部 分 功能 性 留 下 一 些 空 间 , 以 便 让 其 他 应 用 程序 有 可 能 在 日 
后 填补 这 一 空缺 。 或 者 ,应 用 开发 者 也 可 以 充分 思考 一 下 如 何 才 能 使 日 己 的 应 用 程序 填补 
其 他 应 用 所 遗留 的 功能 性 空 日 。 

不 过 ,也 要 明日 一 点 ,里 然 我 们 在 为 10S 平 台 设 计 移 动 应 用 的 时 候 应 该 休 循 :OS 7 的 最 
新 理念 ,但 这 并 不 一 定 意 味 春 你 的 应 用 程序 一 定 就 需要 进行 改变 ,因为 单纯 “为 改变 而 作出 
的 改变 "或许 最 终 会 走 很 多 弯路 。 如 采 东 西 没 坏 , 就 不 需要 进行 修理 ,我 们 的 应 用 如 打 状 态 
良好 ,就 没有 必要 一 定 花 费 人 力 和 财力 去 迎合 10S 7 的 理念 。 而 且 , 配 合 i9S 7 的 设计 风格 
也 并 不 意味 看 必须 以 牺牲 应 用 个 性 作为 代价 。 很 多 优秀 的 设计 师 依然 可 以 通过 目 己 天 才 的 
想象 力 和 创造 力 做 出 更 加 成 熟 合理 的 应 用 。 因 此 ,作为 设计 师 ,我 们 不 应 该 因为 10S 7 所 做 
出 的 重大 改变 而 迷失 目 己 。 

IOS 7 确实 是 一 个 巨大 的 进步 ,我 们 应 该 深入 理解 10S 平台 的 视觉 规律 和 设计 规范 ,以 
便 在 应 用 设计 的 过 程 中 更 加 高 效 、 美 观 和 时 尚 ! 
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iOS 平台 的 交互 特 所 


虽然 我 们 已 经 对 移动 应 用 用 户 体验 设计 的 流程 步骤 及 方法 有 所 了 解 , 但 是 当 我 们 拿 起 
和 笔 或 是 坐 在 电脑 前 准备 为 移动 应 用 进行 原型 设计 的 时 候 , 会 发 现 依然 还 有 很 多 问题 控 在 
我 们 面前 , 吸 每 解决 。 例 如 : 我 们 的 设计 是 否 需 要 兼顾 不 同 的 应 用 平台 或 移动 设备 ? 选择 
哪 种 导航 方式 ?如何 符合 OS 平台 的 设计 规范 ?……… 

所 以 , 先 不 要 急于 把 你 的 奇 思 妙 想 付 诸 实 施 ,这 是 一 个 漫长 的 ,而 且 和 需要 非常 严谨 、 反 复 
推 融 的 过 程 。 接 下 来 的 儿 间 将 逐步 告诉 读者 如 何 按部就班 ,有 条 不 茶 地 把 自己 的 应 用 设计 
成 一 个 能 够 达到 专业 水 准 的 ,符合 用 户 和 市 场 要 求 的 .可 实施 编程 的 高 保 真 原型 。 而 本 章 将 
从 最 基本 的 移动 设备 以 及 移动 应 用 的 交互 特点 开始 ,由 浅 人 深 地 逐步 帮助 大 家 成 为 拥有 创 
新 意识 和 专业 理念 的 设计 师 。 


2.1 TARIOS 平台 的 移动 设备 


由 于 我 们 的 工作 面 对 的 是 移动 设备 ,所 以 限定 了 我 们 能 够 发 挥 和 展现 日 己 才华 的 舞台 。 
可 以 说 ,我 们 的 工作 就 是 在 巴 擎 大 小 的 一 块 触 摸 屏 上 反 反 复 复 地 纠结 。 也 正 是 因为 如 此 ,我 
们 的 设计 难度 比 其 他 门类 的 设计 以 及 传统 的 网 页 、UI 设 计 要 大 得 多 。 由 于 移动 设备 的 特殊 
性 ,给 我 们 的 设计 工作 市 来 了 各 种 各 样 的 限制 ,而 且 不 同门 类 的 移动 设备 也 各 目 存 在 着 目 己 
的 便 件 特点 ,因此 不 得 不 在 设计 过 程 中 反复 鞭 酌 M TC EE Bi EE E 

由 此 可 见 , 在 进入 制作 阶段 的 第 一 步 , 就 是 要 全 面 了 解 移 动 设备 的 种 类 、 特 点 ` 规 格 和 
差异 。 


2.1.1 移动 设备 的 种 类 


我 们 的 设计 主要 是 针对 新 型 的 智能 移动 通信 设备 ,通俗 地 说 ,就 是 大 家 所 熟知 的 采用 触 
措 屏 技术 的 智能 手机 和 平板 电脑 。 因 此 ,采用 物理 按键 或 手写 笔 操 作 的 智能 手机 产品 不 在 
我 们 所 介绍 的 范围 内 。 同 时 ,新 型 的 智能 移动 设备 还 需要 具备 相应 的 人 硬件 配置 和 功能 ,必须 
具备 WiFi 无 线 网 络 功能 .内 部 存储 功能 、. 单 点 或 多 点 触 控 屏 才 声音 播放 融 、 考 元 风 、 耳 机 
插口 以 及 数据 传输 功能 。 而 普 过 的 移动 设备 一 般 还 具备 摄像 头 ( 包 括 前 置 摄像 头 )、 闪光灯 、 
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RR eh 蓝牙 .重力 感应 功能 .光线 传 感 需 感应 功能 ,以 及 电子 罗盘 等 等 。 当 然 
这 些 便 件 在 10S 平台 的 主流 产品 中 都 是 具备 的 ， e^ E E 
至 关 重 要 ,因此 ,我 们 应 该 对 它们 有 一 定 的 了 解 。 

总 的 来 说 ,我 们 把 智能 移动 设备 分 为 两 大 类 : 手机 和 平板 电脑 ( 见 图 2-1)。 它 们 的 差别 
主要 在 于 是 否 具 备 通 话 功 能 和 尺寸 的 大 小 上 。 虽 然 通 话 和 漫游 目前 依然 是 手机 最 主要 的 功 
能 ,但 是 随 着 移动 应 用 产品 的 丰富 和 不 断 发 展 更 殖 , 各 种 交流 和 通话 方式 渐渐 使 手机 变 得 多 
元 化 ,通话 质量 已 经 不 再 作为 人 们 选择 手机 产品 的 主要 依据 ,而 功能 是 否 齐 全 、 能 否 莱 容 更 
多 的 移动 应 用 程序 成 为 了 手机 产品 的 主要 卖点 ,1iOS 平台 的 手机 设备 是 iPhone, 

平板 电脑 (iPad) 就 是 为 了 使 用 各 种 移动 应 用 程序 而 衍生 出 来 的 ,特点 是 屏 硕 较 大 ,一 般 
都 采用 多 点 触 探 ,所 以 操控 灵活 ,更 适合 工作 .娱乐 和 学 习 , 缺 点 是 没有 手机 携 市 起 来 方便 ， 
因此 在 普通 平板 电脑 的 基础 上 还 衍生 出 来 很 多 种 小 型 的 平板 电脑 GPad mini) 。 而 有 些 手 机 
厂商 为 了 弥补 手机 屏 幕 较 小 的 缺点 ,也 设计 并 生产 了 多 种 超大 屏 医 的 手机 ,因此 单单 从 外 形 
上 已 经 难以 区 分 。 























图 2-1 手机 与 平板 电脑 


这 里 面 比较 特殊 的 是 ipod tauch 系列 , 它 可 以 算是 处 在 这 两 大 类 移动 产品 之 间 ,虽然 体 
积 与 手机 相似 ,但 从 性 能 上 来 说 它 更 像 是 平板 电脑 ,虽然 不 属于 10S 平 台 的 主流 产品 ,但 我 
们 不 能 忽视 它 。 


2.1.2 iOS 移动 设备 的 规格 和 像素 尺寸 


iPhone 手机 的 大 小 规格 相对 固定 的 ,只 是 iPhone 5 系列 要 比 之 前 的 几 版 产品 略 长 一 
些 ,宽度 是 按照 手 营 的 抓 担 感受 而 设计 制定 的 。 平 板 电 脑 iPad 因为 不 受 单 手 操作 的 限制 ， 
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所 以 设计 成 书本 的 大 小 (普通 iPad 为 16 开 杂 志 的 大 小 ,而 iPad mini 则 设计 成 32 开 书 本 大 
小 )。 关 于 移动 设备 的 规格 尺寸 我 们 无 需 过 多 了 解 , 对 于 应 用 产品 设计 工作 来 说 ,我 们 关心 
的 主要 是 移动 设备 屏 知 的 像 系 尺寸 。 因 为 这 个 尺寸 的 大 小 直接 关系 到 图 形 、 特 效 以 及 文字 
的 大 小 比例 关系 。 

相 比 其 他 平 合 来 说 ,iDOS 平台 的 产品 比较 规范 和 一 致 ,给 设计 工作 市 来 了 很 多 的 方便 。 








1536px 





768px 


2048px 


1024px 


960px 











iPad 4 


图 2-2 iOS 平 台 移 动 设备 的 像素 尺寸 


通过 图 2-2 我 们 看 到 了 四 款 比 较 有 代表 性 的 10S 平 台 移 动 设备 的 像素 尺寸 。iPhone 与 
iPod touch 的 前 期 产品 的 屏幕 像素 尺寸 是 960 X 640 像素 ,iPhone5 与 新 一 代 iPod touch 是 
1136 X640 像素 ,iPad mini 是 1024X768 像素 ,iPad 是 2048 X1536 像素 。 这 些 尺 寸 是 我 们 
进行 界面 设计 与 制作 时 ,在 绘图 软件 中 生成 图 像 大 小 的 参照 ,同时 ,也 是 下 一 步 了 解 移动 设 
备 人 体 工程 学 中 关于 区 域 划 分 的 重要 依据 。 

在 此 也 顺便 了 解 一 下 其 他 应 用 平台 移动 设备 的 规格 ,目的 是 与 170S 平 台 的 移动 设备 作 
一 个 比较 ,比如 Android 和 Windows Phone 平 台 。 不 过 要 想 全 面 了 解 运 行 这 两 个 平台 的 移 
动 设 备 就 没有 那么 容易 了 ,原因 是 这 两 个 平台 的 产品 种 类 实在 太 多 ,而 且 是 由 众多 的 生产 三 
商 设 计生 产 出 来 的 , 既 没 有 统一 的 规格 样式 ,也 没有 统一 的 屏 硕 尺寸 ( 见 图 2-3), 

不 过 要 是 细心 总 结 的 话 ,我 们 也 并 不 是 完全 没有 依据 可 循 。 概 括 一 下 ,我 们 大 致 可 以 做 
出 以 下 划分 : 低 问 手机 设备 的 屏 硕 显示 尺寸 一 般 为 480 X 320 像 系 ,高 清 屏 大 手机 一 般 是 
960X640 像素 ,或 800X600 像素 的 ,这 与 10S 平台 比较 接近 。 还 有 一 部 分 超大 屏幕 的 手机 
可 以 达到 1920X1080 像素 。 而 平板 电脑 可 以 根据 对 角 尺 寸 分 为 : 5 英寸 屏 800 X480 像素 ， 
7 英寸 屏 1024X600 像素 ,8 英寸 屏 1024X768 像素 ,9 英寸 屏 1280X800 像素 ,10 英寸 屏 根 
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图 2-3 Android 和 Windows phone 平 台 的 众多 移动 设备 种 类 





据 长 宽 比 分 为 1366 X768 像素 和 1280X800 像 双 两 种 ,局 端 宙 有 视网膜 技术 的 屏 右 可 达到 
1920 X1080 Z. 

我 们 痢 知 道 ,图 像 的 像素 大 小 是 可 以 根据 尺寸 加 下 羔 容 的 ,也 就 是 说 ,我 们 在 绘图 软件 
中 设计 制作 出 来 的 图 像 如 宁 俩 大 ,那么 载 和 人 到 移动 设备 中 会 被 缩小 , 它 的 清晰 度 是 不 会 损失 
的 。 而 反 过 来 如 采 我 们 的 图 像 俩 小 , 载 人 到 高 清 屏 惰 上 就 会 被 揽 开 放大 ,这 时 候 图 像 就 会 变 
模糊 ,显得 很 粗糙 。 所 以 在 绘图 起 始 , 生 成 网 像 文 件 之 前 ,最 好 先 了 解 目 己 的 应 用 会 在 什么 
样 的 设备 上 运行 和 使 用 ,尽量 按照 最 大 的 屏 几 像素 矿 二 生成 文件 ,这样 才 能 够 适应 各 种 移动 
设备 的 屏 才 显示 效 采 。 


2.1.3 iOS 移动 设备 的 使 用 方法 


三 大 平台 的 移动 设备 在 使 用 方法 上 部 有 所 差异 ,因此 在 设计 应 用 程序 之 前 必须 对 它们 
的 使 用 方法 了 如 指 掌 ,这 对 于 移动 应 用 的 用 户 体验 设计 至 关 重 要 。 

首先 要 了 解 几 种 移动 设备 操作 按键 的 类 型 ,也 就 是 经 背 会 遇 到 的 物理 按键 .触摸 按 键 和 
虚拟 按键 。“ 物 理 按 键 ?是 通过 手指 的 压 按 可 以 按 下 并 弹 起 的 按键 ,在 旧式 移动 设备 中 比较 
多 见 , 随 春 各 大 生产 广 商 对 产品 便 件 的 不 断 升 级 ,这 种 按键 在 移动 设备 上 越 来 越 少 ,当下 的 
新 产品 中 几乎 已 经 很 少 出 现 了 。 “和 触 岳 按键 "一 般 状 态 下 以 高 完 显 示 ,通过 手指 的 触摸 可 以 
执行 操作 的 按键 ,也 称 作 电容 式 触摸 按键 (CiOS 平台 的 移动 设备 不 设 此 按键 )。 而 “虚拟 按 
键 ? 则 是 显现 在 触摸 屏 噬 上 ,根据 应 用 程序 的 功能 要 求 相 机 出 现 , 通 过 点 击 触摸 屏 来 达到 操 
作 目 的 ( 见 图 2-4) 。 

同时 ,“ 开 机 键 ”“ 音 量 十 “音量 一 ”三 个 物理 按键 也 几乎 是 所 有 的 移动 设备 必 备 的 ,但 
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虚拟 按键 


触摸 按键 


^. 
` 








物理 按键 S. 





图 2-4 移动 设备 的 三 种 按键 形式 


是 通常 不 会 出 现在 操作 面板 上 ,大 多 设置 在 设备 的 两 侧 或 项 部 。 通 过 图 2-2 可 以 看 到 ,iOS 
平台 的 移动 设备 的 操作 面板 上 只 有 一 个 圆 形 的 物理 按键 , 即 Home 键 。 除 此 之 外 的 一 切 操 
作 都 由 系统 和 应 用 平台 内 部 的 虚拟 按键 完成 。 

无 论 在 哪 一 个 操作 平台 上 ,Home 键 的 功能 都 是 相同 的 , 那 就 是 在 任何 状态 下 退出 当前 
画面 , 回 到 启动 界面 。 在 Android 和 Windows Phone 平台 的 移动 设备 当然 也 适用 。 但 是 ， 
IOS 移动 设备 上 的 这 个 Home 键 略 有 些 特殊 ,如 采 已 经 处 在 系统 首页 的 状态 下 , 按 下 Home 
键 则 会 打开 搜索 功能 。 而 在 任何 状态 下 双击 Home 键 都 可 以 浏览 后 台 挂 起 和 最 近 打 开 的 
应 用 程序 ,这 也 是 为 了 方便 用 户 能 够 快速 地 在 各 个 应 用 之 间 跳 转 的 效率 型 设计 ,从 为 一 个 角 
度 提醒 我 们 每 一 位 应 用 开发 设计 人 员 ,在 应 用 设计 功能 上 应 该 尽量 的 专 一 ,大 而 全 的 应 用 在 
将 来 会 越 来 越 失 去 苋 争 力 。 

三 大 平台 的 任何 设备 都 有 Home 键 ,并 把 它 作 为 重要 的 核心 功能 ,这 显然 是 基于 在 用 
户 体 验 中 能 否 快速 退出 和 跳 转 方便 而 进行 的 设计 。 然 而 ,Android 和 Windows Phone 平台 
的 移动 设备 设 有 “返回 键 ” 功 能 ,因此 在 设计 这 两 个 平台 的 应 用 程序 原型 时 无 须 考 虑 设置 页 
面 导 航 的 返回 控件 。 而 ioOS 平 台 则 相反 ,由 于 操作 面板 上 没有 设置 “返回 键 ”, 所 以 我 们 必 
须 在 设计 应 用 原型 的 导航 时 ,要 充分 考虑 到 页 面 跳 转 和 返回 主页 的 方式 。 

通过 平 打 公司 对 10S 平台 移动 设备 的 简约 式 设 计 , 可 以 体会 到 在 将 来 的 移动 应 用 设计 
发 展 中 ,我 们 的 功能 设置 和 交互 方式 不 能 依赖 于 设备 目 市 的 按键 ,而 应 该 在 应 用 目 号 的 布 
局 和 控件 安排 中 进行 配置 和 优化 ,对 功能 要 尽量 的 精简 ,降低 用 户 的 操作 难度 ,提高 用 户 
的 操作 效率 。 

那么 ,如 何 才 能 更 加 有 效 地 加 强 应 用 产品 的 交互 体验 ,使 用 户 提 高 对 我 们 的 应 用 产品 的 
认同 感 呢 ? 关 键 是 以 用 户 为 本 ,从 各 方面 都 细致 入 微 地 站 在 用 户 的 角度 上 考虑 问题 。 下 面 ， 
从 我 们 的 手指 开始 ,探索 如 何 优化 移动 应 用 用 户 体验 的 交互 方式 。 
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2.2 移动 设备 的 人 体 工程 举 特 所 


“人 体 工 程 学 ”这 个 词 听 起 来 似乎 有 些 专业 和 深奥 ,其 实 是 和 我 们 的 生活 最 密 不 可 分 的 
一 门 学 问 , 无 论 做 任何 方面 的 设计 ,都 会 有 相应 的 人 体 工程 学 内 容 需 要 去 了 解 。 它 研究 的 是 
人 和 工具 、 人 和 产品 以 及 人 和 环境 的 关系 ,关注 人 们 在 工作 、 生 活 中 和 休息 时 怎样 才能 更 加 
高 效 、 健 康 、 安 全 和 舒适 。 它 还 涉及 人 体 解 训 学 、. 生 理学 和 心理 学 等 方面 的 知识 。 对 于 移动 
应 用 的 用 户 体 验 设 计 来 说 ， 人 体 工 程 学 ?当然 也 是 尤为 重要 。 


2.2.1 从 拇指 谈 起 


正 因为 拥有 灵活 的 拇指 ,我 们 的 双手 才能 够 完成 工作 和 生活 中 无 数 复 杀 和 高 难度 的 动 
作 。 同 样 ,在 操作 移动 设备 的 时 候 , 拇 指 可 以 算是 人 体 上 最 快速 .最 高 效 、 使 用 频率 最 高 的 吾 
家 了 。 无 论 是 操作 手机 还 是 平板 电脑 ,拇指 都 是 你 首选 的 操作 工具 。 因 此 ,我们 就 从 拇指 开 
始 , 了 解 移动 设备 的 人 体 工 程 学 特点 。 本 下 主要 和 匈 针 对 单 手 操作 ,也 就 是 手机 设备 来 进行 分 
析 ,双手 操作 会 在 2. 2. 2 节 中 进行 分 析 研 究 。 

在 操作 手机 设备 时 ,大 多 数 情 况 下 是 单 手 操 作 , 这 样 可 以 解放 出 为 一 只 手 来 完成 其 他 的 
任务 。 因 此 ,移动 应 用 是 不 是 好 用 ,很 关键 的 一 个 考验 就 是 是 否 适合 单 手 操作 。 






































(a) 移动 设备 的 单 手 (右手 ) 操 作 (b) 拇指 单 手 屏幕 点 击 舒 适度 


ARR! 


图 2-5 iOS 移动 设备 的 单 手 操作 
通过 图 2-5 可 以 看 到 ,在 单 手 操作 手机 时 只 有 拇指 能 够 自由 、 灵 活 地 操作 设备 。 根 据 拇 
指 与 屏 各 的 关系 ,我 们 制作 出 了 针对 拇指 舒适 度 的 区 域 分 布 图 ( 见 图 2-5(b)), 根 据 色 彩 的 
热度 可 以 体会 拇指 在 手机 屏幕 上 点 击 、 滑 动 时 的 舒适 度 。 这 里 是 在 针对 右手 习惯 的 用 户 进 
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行 分 析 的 , 左 撒 子 可 以 翻转 过 来 , 反 回 理解 。 红 色 部 分 是 拇指 最 易 点 击 的 区 域 , 橘 色 其 次 ; 
由 于 拇指 的 长 度 限 制 ,因此 左 侧 的 区 域 点 击 起 来 相对 比较 放松 ,而 项 部 和 右 下 角 是 最 难点 击 
的 区 域 。 

了 解 拇 指 的 点 击 舒 适度 的 屏幕 区 域 划分 对 我 们 应 用 界面 的 布局 安排 是 非常 有 意义 的 。 
经 党 点 击 的 或 者 相对 重要 的 控件 要 尽量 安置 在 拇指 易于 点 击 的 区 域 , 而 危险 性 的 操作 (比如 
删除 或 编辑 ) 或 者 不 易 被 使 用 的 功能 控件 可 以 安置 在 相对 难以 点 击 的 区 域 。 同 时 ,应 该 把 标 
签 栏 和 采 单 栏 放置 在 界面 的 底部 ,这 和 在 使 用 计算 机 和 浏览 网 页 的 习惯 有 所 背离 ,但 是 如 末 
简单 地 按照 习惯 把 它们 安置 在 界面 的 顶端, 就 会 使 用 户 的 拇指 感到 非常 的 别扭 。 














(a) Photopod (b) USA Today 


图 2-6 ”iOS 平 台 的 “Photopod” 和 “USA Today" 


在 图 2-6 中 ,通过 拇指 的 舒适 度 区 域 分 布 图 对 两 款 不 同 的 应 用 进行 了 测试 。 两 款 应 用 
都 把 重要 功能 放置 在 了 界面 的 底部 ,“Photopod” 除 了 相对 危险 的 “清除 完成 ” 键 和 不 常 使 用 
的 设置 键 外 ,重要 的 控件 都 避 开 了 难以 点 击 的 区 域 ,同时 为 了 方便 点 选 , 将 照片 缩 略 图 一 律 
安置 在 界面 的 左 侧 ;“USA Today” 中 特意 把 视频 截图 和 播放 按键 安放 在 画面 的 中 间 偏 上 ， 
用 意 一 目 了 然 。 

针对 左 撤 子 的 用 户 , 早 期 有 些 应 用 还 特意 设置 了 将 控件 布局 左右 翻转 ,但 是 结果 虽然 适 
合 了 他 们 手指 的 舒适 性 , 却 打 破 了 思维 上 的 惯性 。 也 就 是 说 无 论 从 视觉 顺序 上 还 是 思考 顺 
序 上 ,都 使 这 些 特 殊 的 用 户 耗费 更 多 的 脑力 来 适应 ,其 结果 并 没有 给 他 们 带 来 更 多 的 方便 ， 
反而 使 应 用 操作 起 来 更 加 复杂 ,因此 现在 的 移动 应 用 中 很 少 有 控件 布局 左右 翻转 的 功能 
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这 也 提示 我 们 ,不 能 一 味 地 迎合 人 体 的 舒适 性 而 打破 人 们 视觉 上 和 思维 上 的 惯性 ,有 时 会 适 
得 其 反 。 应 用 的 界面 布局 必须 要 多 方面 地 全 盘 考 虑 。 
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(a) Word Crasher (b) ESPN ScoreCenter 


图 2-7 iOS 平 台 的 “Word Crasher” 和 “ESPN ScoreCenter” 





从 图 2-7 中 的 两 款 应 用 可 以 体会 到 ,很 多 应 用 在 界面 布局 上 都 充分 考虑 了 左 撤 子 使 用 
的 舒适 性 问题 ,无 论 是 按键 、 列 表 项 目 还 是 表单 样式 的 设计 部 平等 地 对 每 了 左右 手 的 拇指 。 


2.2.2. 单 手 操作 还 是 双手 操作 


手机 设备 上 的 应 用 并 不 都 受 单 手 操作 的 束缚 ,很 多 应 用 或 游戏 都 是 基于 双手 操作 而 开 
发 的 。 尤 其 是 在 横 屏 模式 下 ,要 求 我 们 的 双手 共同 地 参与 屏幕 操作 ,这样 似 乎 就 不 受 拇指 灵 
活 度 的 限制 。 由 于 手机 的 体积 较 小 ,我 们 的 右手 可 以 完全 离开 设备 ,使 用 食指 与 拇指 搭配 ， 
完成 更 加 快速 和 精细 的 操作 ,因为 食指 比 拇指 更 加 的 灵敏 和 精确 。 

而 平板 电脑 的 操作 , 则 必须 由 双手 进行 。 由 于 设备 的 体积 和 重量 相对 较 大 (这 里 针对 的 
是 iPad 和 iPad mini) ,因此 需要 两 只 手 同 时 握 住 设备 ,虽然 右手 可 以 暂时 地 离开 设备 进行 操 
作 , 但 是 在 行走 或 坐 甲 过 程 中 ,大 部 分 时 间 还 是 需要 双手 来 把 握 的 。 这 样 的 情况 下 ,两 个 拇 
指 依然 成 为 了 首选 的 操作 工具 ,只 有 在 不 得 已 的 情况 下 ,我们 才 会 临时 动用 食指 来 进行 细节 
的 操作 。 可 以 参考 图 2-8(b) 的 双手 拇指 的 舒适 度 区 域 划 分 来 考虑 我 们 的 界面 布局 。 

从 图 2-9 中 可 以 看 到 ,iOS 平台 的 “SBS World News” 和 “系统 设置 ”都 是 为 了 使 用 户 在 
操作 程序 时 双手 无 需 离开 设备 而 设计 的 ,把 几乎 所 有 的 按钮 .标签 以 及 选项 都 安排 在 了 界面 
的 两 侧 和 底部 ,真正 做 到 了 操作 体验 与 视觉 体验 的 完美 统一 ,以 及 以 用 户 为 本 的 设计 理念 。 
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(a) 移动 设备 的 双手 操作 (b) BHFDOUF Bf aT E 
热度 区 域 分 布 图 


图 2-8 iOS 移动 设备 的 双手 操作 





(a) SBS World News (b) “设置 "界面 


图 2-9 ” iOS 平台 的 “SBS World News” 和 “设置 ” 


无 论 我 们 使 用 单 手 操作 还 是 双手 操作 ,对 使 用 各 种 “手势 ”的 技巧 必须 邵 悉 。 能 够 使 用 
手势 ,是 移动 设备 优 于 使 用 鼠标 、 键 盘 的 普通 个 人 计算 机 最 显著 的 特征 ,也 是 触摸 屏 技术 的 
最 核心 的 功能 。 现 在 我 们 分 别 对 单 手 指 手势 ( 单 手 操作 可 以 实现 ) 和 多 手指 手势 ( 需 双 手 操 
作 实 现 ) 在 10S 平台 中 的 特点 加 以 介绍 。 

1. 单 手 指 手 势 

(1) 横 癌 滑动 : 一 般 情 况 下 可 以 实现 左右 翻 页 浏览 。 同 时 ,在 OS 平台 的 部 分 应 用 中 
可 以 通过 横向 滑动 来 激活 列表 项 目的 选项 ， 标准 模式 下 为 “删除 ”选项 ( 见 图 2-10 (a)) ,设计 
者 也 可 以 根据 需要 定义 或 增加 其 他 选 型 。 

(2) 纵 回 滑动 : 一 般 情 况 下 可 以 实现 上 下 翻 页 浏览 。 在 绝 大 部 分 的 应 用 中 , 当 滑 动 到 
顶 问 时 会 目 动 转换 为 “刷新 ”功能 ( 见 图 2-10(b) ) 。 

(3) 双击 : 一 般 情 况 下 可 以 实现 局 部 放大 ,主要 针对 地 图 工具 和 图 像 浏览 功能 。 在 图 
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片 浏览 器 中 除了 局 部 放大 还 可 以 通过 双击 来 还 原 成 满 屏 大 小 显示 。 

(D 长 点 : 这 个 手势 含义 比较 多 样 。 一 般 情 况 下 ,长 点 会 激活 文本 拷贝 和 上 段落 选择 的 
功能 ,并 在 输入 模式 下 激活 粘贴 功能 。 在 iOS 平 台 的 浏览 器 及 文本 工具 中 ,长 点 还 可 以 激 
活 “ 局 部 放大 镜 ”( 见 图 2-10(c))。 

CO 长 点 加 拖 动 : 一 般 情况 下 可 以 实现 对 图 标 、 标 签 及 卡片 的 移动 。 
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(a) Fo] T8 (b) 纵向 请 动 (c) 长 点 


图 2-10. iOS 平台 的 “Mail” 中 的 手势 运用 
2. 多 手指 手势 
G) “EOM jT. 这 是 需要 两 个 手指 完成 的 手势 ,也 就 是 两 个 手指 之 间 的 收 放 动 作 。 
主要 起 到 缩小 和 放大 的 作用 ( 见 图 2-11). 
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(C2) 两 手指 双击 : 见 小 功能 。 这 怒 怕 算是 一 个 侠 为 人 知 的 功能 了 ,在 Google 地 图 中 第 
一 次 被 使 用 ,主要 是 针对 单 手 指 双击 的 放大 功能 而 开发 的 。 

(3)“ 抓 "和 “ 放 ”: 这 两 个 功能 只 有 在 OS 平台 的 平板 电脑 设备 CiPad) 中 才 可 以 使 用 , 它 需 
要 五 个 手指 同时 使 用 ， 抓 "是 指 五 个 手指 在 屏幕 上 回 中 心 同 时 聚拢 ,可 以 起 到 快速 关闭 或 退出 
的 作用 ;“ 放 ” 则 反 过 来 ,五 个 手指 从 中 心 同时 展开 ,可 激活 “浏览 最 近 打 开 的 程序 ”功能 。 

这 里 为 大 家 介绍 的 是 移动 应 用 中 比较 第 见 的 手势 ,还 有 更 多 的 手势 可 以 通过 我 们 目 己 
的 创意 和 开发 来 实现 。 但 是 无 论 我 们 使 用 标准 手势 还 是 研发 出 新 的 手势 ,一 定 要 记 痢 在 应 
用 的 帮助 文档 中 加 以 详尽 的 说 明 , 因 为 绝 大 部 分 用 户 是 不 会 罪 日 己 的 摸索 来 发 现 特殊 功能 
的 。 我 们 经 第 会 遇 到 一 些 智能 移动 设备 的 老 用 户 , 在 多 年 之 后 才 发 现 双 击 屏 禹 可 以 使 图 像 
局 部 放大 。 当 然 , 通 过 了 解 各 种 标准 手势 ,对 我 们 移动 应 用 用 户 体验 设计 的 布局 安排 与 控件 
设置 也 很 有 帮助 ,很 多 功能 或 控件 可 以 被 简化 或 去 除 。 比 如 ,由 于 使 用 “ 捍 ” 和 “ 提 ” 的 手势 进 
行 缩放 已 经 被 广大 的 移动 用 户 所 兄 知 ,所 以 我 们 可 以 观察 一 下 ,无论 哪 个 平台 中 的 网 片 浏览 
船 中 都 不 再 设置 缩 放 功 能 的 控件 了 。 


2.2.3 用 指 尖 来 触摸 


在 成 千 上 万 的 移动 应 用 中 ,可 以 看 到 很 多 功能 和 布局 非常 复杂 的 产品 ,每 一 个 设计 师 都 
4i E H CLR ERO BERE SS E HI 7; [8 X BÉ SIE DI BE SCA V IR TE A fü BE SEI BE AIC: ,最终 把 目 
C. BR A TRE ETT PSP DEAS s IIS Je P EIR TON YU o ài OLX da TF OK ZI AS b iud» x s T Tg 
杂乱 不 易 分 辨 ,使 用 户 在 界面 上 艰难 地 摸索 , 饱 受 挫折 ( 见 图 2-12)。 这 里 ,必须 帮助 大 家 有 
条 不 节 地 把 这 个 难题 解决 好 ! 方法 其 实 很 简单 , 那 就 是 分 析 和 了 解 指 尖 。 
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图 2-12 10S 2E & Bj" Epicurious" fll “Speedtest” 
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从 前 面 两 个 小 节 可 以 体会 到 ,设计 完美 的 用 户 体验 设计 ,必须 了 解 移动 设备 的 人 体 工 程 
学 特点 。 最 主要 的 ,就 是 了 解 双 手 与 触摸 屏 之 间 的 关系 ,能 否 针对 这 个 关系 调整 好 应 用 的 布 
局 和 图 形 细节 ,对 于 成 功 的 用 户 体验 设计 至 关 重 要 。 接 下 来 将 继续 深入 地 了 解 手 指 与 应 用 
界面 之 间 的 互动 ,分 析 手 指 的 点 击 与 控件 大 小 之 间 的 关系 。 

屏幕 上 的 每 一 个 点 击 目标 都 是 为 了 指 尖 的 触摸 而 存在 的 ,因此 应 用 界面 的 布局 安排 和 
控件 设置 都 应 该 细心 地 去 迎合 指 尖 的 大 小 而 设计 。 那 么 指 尖 在 点 击 屏幕 时 需要 多 大 的 尺寸 
呢 ? 三 大 平台 给 出 的 太 才 各 不 相同 , 毕 苋 每 个 人 的 手指 大 小 .粗细 都 不 相同 ,因此 可 以 粗略 
地 把 这 个 太 才 限定 在 7 一 10mm 之 间 。 也 就 是 说 按键 高 度 只 要 不 小 于 7mm, 就 可 以 保证 用 
手指 触摸 起 来 比较 的 准确 和 容易 。 

下 面 看 一 看 iOS 平台 对 指 尖 的 定义 标准 吧 ,苹果 公司 把 这 个 大 小 的 高 度 定 义 为 44 点 ， 
KA 7mm。 当 然 , 时 期 的 屏幕 分 辩 挛 一 个 点 驶 代表 一 个 像素 。 在 新 的 视网膜 屏幕 分 辩 率 
下 ,一 个 点 包含 四 个 像素 (横向 的 两 个 像素 和 纵向 的 两 个 像素 ), 这 个 高 度 就 成 为 了 88 像素 。 
在 10S 平台 的 移动 设备 上 ,这样 的 尺 才 随处 可 见 : 表 视 图 虚拟 键盘 .导航 栏 ` 标 签 栏 ` 列 表 
项 目 等 等 ,者 能 看 到 统一 的 44 点 的 高 度 ,这 已 经 成 为 了 1OS 界面 的 设计 规律 。 

通过 图 2-13 可 以 清晰 地 体会 到 OS 界面 以 44 像素 高 度 为 标准 和 基数 的 界面 设计 规 
律 。 包 括 应 用 图 标 所 占 的 空间 ,都 是 以 44 点 为 基数 来 安排 的 ( 见 图 2-13(a))。 而 导航 栏 里 
的 文字 高 度 昌 然 没 有 44 点 (只 有 29 点 ), 但 是 它 的 实际 点 击 区 域 的 高 度 实际 上 就 是 整个 导 
航 栏 。 即 使 没有 点 中 文字 的 中 心 ,只 要 是 点 在 了 导航 栏 之 内 ,都 算是 点 到 了 按钮 ( 见 
图 2-13(b))。 至 于 说 点 击 的 宽度 ,一 般 没 有 固定 尺寸 ,但 是 可 以 观察 一 下 虚拟 键盘 的 按键 筑 
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图 2-13 ”1iOS 平 台 基 于 指 尖 尺寸 的 界面 设计 规律 
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RE ,大 小 是 30 点 ,因此 可 以 把 它 作 为 我 们 宽度 的 最 小 标准 ,也 就 是 说 单个 控件 的 最 小 宽度 不 
能 小 于 30 点 (视网膜 分 辨识 为 60 像素 )。 

以 上 数据 是 为 10S 平 台 的 移动 应 用 进行 用 户 体 验 设 计时 的 重要 参考 。 相 信 读 者 通过 
对 指 尖 的 人 体 工 程 学 分 析 所 得 出 的 经 验 参考 ,会 使 应 用 产品 更 加 易 用 ,更 舒适 和 人 性 化 。 














2.2.4 视觉 的 运行 机 迹 

从 单 手 到 双手 、 从 手掌 到 指 尖 ,我 们 对 移动 设备 的 人 体 工 程 学 的 特点 了 解 得 越发 详细 。 
然而 ,无 论 是 从 交互 设计 学 上 还 是 从 人 体 工程 学 的 生理 人 研究 对 象 上 ,双手 并 不 是 唯一 和 移动 
设备 产生 关系 的 郁 家 。 还 需要 研究 和 考虑 哪个 方面 呢 ? 当然 是 "眼睛 ”。 要 了 解 移动 设备 的 
交互 特点 ,视觉 因 素 束 显 得 更 加 的 重要 ,因此 接 下 来 就 从 双眼 入手 ,了 解 移动 设备 的 视觉 体验 。 

之 所 以 把 它们 称 作 ”移动 设备 ”, 除 了 便于 携 珊 ,更 主要 的 原因 就 是 能 够 在 移动 中 使 用 。 
我 们 可 以 在 行走 中 各 种 交通 工具 上 ,或 者 千奇百怪 的 场合 中 使 用 它们 。 那 么 同时 ,我 们 的 
移动 应 用 也 面临 春 各 种 复杂 环境 和 状态 的 考验 。 例 如 ,在 行走 中 ,或 是 在 哮 杂 的 环境 里 ,我 
们 的 注意 力 不 可 能 完全 放 在 移动 设备 屏幕 上 ,于 是 我 们 精心 设计 的 、 充 满 各 种 细 闻 和 内 涵 的 
界面 根本 没有 被 注意 到 ,用户 们 勿 匆忙 从 地 用 余 光 扫 视 了 一 下 主页 后 ,就 直 奔 目标 地 进入 主 
题 或 者 直接 退出 。 因 此 ,有 必要 用 心 了 解 一 下 用 户 快 速 扫描 界面 时 的 视觉 规律 ,更 加 细心 地 
安排 界面 布局 ,使 应 用 的 主题 和 视 沉 元 系 更 加 地 突出 ,给 用 户 留 下 更 多 的 视 沉 印象 。 应 用 界 
面 在 运动 中 的 视觉 测试 效果 如 图 2-14 所 示 。 
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(a) 你 设计 的 可 能 是 这 样 (b) 用 户 看 到 的 却 是 这 样 





图 2-14 应 用 界面 在 运动 中 的 视觉 测试 





你 了 解 目 己 的 眼睛 吗 ? 我 们 打开 一 本 森 志 或 者 激活 一 个 网 页 进行 浏览 ,眼球 在 扫描 这 
个 页 面 的 时 候 是 有 规律 的 。 随 着 科技 的 发 展 ,这 个 规律 可 以 被 一 些 特殊 的 仪 瘟 识 别 并 记录 
下 来 ,这 就 是 “ 眼 动 仪 ””2006 年 4 月 ,美国 长 期 研究 网 站 可 用 性 的 著名 网 站 设计 师 杰 柯 
TH * 尼尔森 (Jakob Nielsen) 发 表 了 一 项 《眼球 轨迹 的 人 研究 报告 (BK《F-Shaped Pattern For 
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Reading Web Content》) 。 报 告 中 提出 ,大 多 数 情况 下 浏览 者 都 不 由 上 自主 地 以 “F? 形 状 的 模 
式 阅 读 网 页 ,这 种 基本 恒定 的 阅读 习惯 决定 了 网 页 呈现 下 型 的 关注 热度 。 人 研究 者 用 了 儿 种 
不 同 的 页 面 做 眼 动 仪 测试 ,得 到 了 3 张 热 度 图 ,用 颜色 来 表示 浏览 者 眼光 聚集 的 热度 ,分 为 
最 热 ( 红 色 )、 较 热 ( 黄 色 ) .不 热 ( 蓝 色 ) 和 基本 不 关注 (灰色 ) 4 种 ( 见 图 2-15)。 





图 2-15 有 眼 动 热 度 图 


虽然 杰 柯 析 ， 尼 尔 森 研究 的 载体 是 网 页 或 传统 的 软件 界面 设计 ,但 是 这 对 移动 设备 的 
用 户 体 验 设 计 , 尤 其 是 平板 电脑 上 的 界面 设计 还 是 很 有 参考 价值 的 。 尽管 这 个 人 研究 结果 对 
界面 设计 的 实际 意义 上 还 存在 着 争议 ,但 毕竟 从 人 体 测 量 学 的 角度 上 揭示 了 人 类 眼球 的 运 
动 规律 和 习性 。 从 左 同 右 , 从 上 到 下 ,这 也 是 传统 阅读 习惯 在 网 络 上 的 延伸 。 用 户 在 打开 应 
用 的 界面 时 都 会 有 一 个 明确 或 模糊 的 关注 点 ,眼球 在 界面 上 扫描 时 就 是 在 寻找 这 个 关注 点 。 
当 发 现 类 似 信 息 后 ,用 户 会 阅读 更 多 的 辅助 信息 以 帮助 决断 : 这 究竟 是 不 是 我 要 找 的 东西 ， 
当 发 现 “ 是 ”的 时 候 , 会 点 击 到 详情 页 面 ; 当然 发 现 “ 不 是 ”的 时 候 , 就 会 继续 同 下 阅读 ,循环 
往复 。 用 户 的 耐心 是 有 限度 的 ,所 以 随 春 扫 摘 的 进行 ,页 面 长 度 的 拉 伸 ,用 户 春 找 不 到 太 多 
兴趣 点 ,兴趣 目 然 会 逐渐 消减 ,因此 就 可 能 形成 了 所 谓 的 上 型 或 者 金三角 热 区 。 

那么 ,是否 可 以 利用 这 个 规律 加 强 眼 球 运动 的 流畅 感 , 提 高 用 户 的 视觉 体验 ,从 而 突出 
应 用 的 主题 呢 ? 事实 上 ,可 以 看 到 很 多 的 界面 布局 方式 都 可 以 达到 这 个 目的 。 

图 2-16 上 的 两 个 案例 都 采用 了 不 同 的 方式 有 意识 地 加 强 了 下 型 的 视觉 引导 ,增强 了 用 
户 在 浏览 界面 时 的 流畅 感 和 清晰 感 , 从 而 有 效 地 加 强 了 用 户 体验 质量 。 现 在 我 们 理解 了 对 
眼睛 、 双 手 等 人 体 硕 官 的 研究 对 提高 移动 应 用 用 户 体验 设计 的 重要 意义 ,因此 可 以 更 加 深入 
地 人 研究 用 户 的 习惯 、 弱 点 甚至 偏执 ,来 优化 设计 。 
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(a) Financial News (b) Runkeeper 





图 2-16 1iOS 平 台 的 “Financial News” 和 “Runkeeper” 





2.2.5 优化 视觉 结构 


由 于 眼睛 在 生理 结构 上 的 特殊 性 ,会 给 视觉 造成 很 多 的 困难 .下 义 或 者 错 党 。 因 此 要 充 
分 地 了 人 解 这 些 视觉 第 态 , 在 尽量 避免 产生 错觉 的 同时 ,优化 界面 设计 的 造型 . 细 市 和 结构 ,使 
用 户 能 够 更 加 清晰 、 准 确 和 顺畅 地 浏览 应 用 界面 。 下 面 列 举 儿 个 稼 见 的 优化 界面 视觉 结构 
的 方法 。 

1. 对 数字 进行 分 割 

我 们 的 应 用 难免 会 出 现 电 话 号 码 、 银 行 账号 或 日 期 时 间 这 样 的 长 串 数学 , 面 对 见 长 的 数 
FAPA ,无 论 是 阅读 还 是 输入 对 眼睛 来 说 都 是 比较 吃力 的 ,容易 出 现 差 错 。 为 了 方便 浏览 和 
记忆 ,一般 采用 分 割 的 办 法 把 它们 分 成 多 个 部 分 。 

分 割 长 串 的 数学 有 两 种 方法 ,一 个 是 应 用 界面 本 时 为 每 一 个 字段 提供 独立 的 输入 框 ,这 
样 不 但 缩短 了 文字 出 入 的 长 度 , 降 低 了 阅读 的 难度 ,还 能 防止 输入 错误 ,一 般 在 网 页 和 计算 
机 软件 中 比较 多 见 ( 见 图 2-17(a))。 为 一 个 方法 是 在 用 户 输入 文字 过 程 中 应 自动 地 用 空格 
或 者 分 隔 符 把 字段 隔 开 , 它 的 优点 是 快速 直观 而 且 阅 读 流畅 ,这 也 是 移动 应 用 中 比较 常用 
的 办 法 ( 见 图 2-17(b) ) 。 





























键入 文本 并 拖 移 日 期 元 烷 来 创建 自 定格 式 ， 

短 : | C335. 03123. CE 158-0157-7739 

"m: TER, 

t [C30HO4£CEOBCSOB ~ 

完整 : | 203 年 1 A S B EWA | 158 0157 7739 € 
(a) 计算 机 界面 的 数字 分 割 (b) 移动 界面 的 数字 分 割 


图 2-17 ”数字 的 分 割 方式 
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2.“ 识 别 并 选择 ” 比 “ 回 忆 并 输入 ”要 容易 

在 面 对 各 种 选项 时 ,应 该 尽量 使 用 户 在 一 个 范围 中 进行 选择 ,而 不 是 强迫 用 户 回忆 出 他 
们 的 选项 并 告诉 应 用 程序 。 选 择 会 更 加 的 容易 .方便 和 准确 ,而 输入 则 相对 较 慢 上 且 容易 出 
错 , 因 此 ,应 该 多 设计 一 些 珊 有 可 选 功能 的 控件 ,只 有 在 极 特殊 或 万 不 得 已 的 情况 下 再 设置 
文字 输入 框 ( 如 关键 字 搜 索 ) 。 

由 图 2-18 中 可 以 看 到 ,iOS 平 台 在 录入 日 期 的 方式 上 是 完全 相同 的 ,使 用 识别 并 选择 
的 方法 。 无 论 从 操作 上 .速度 上 还 是 视觉 体验 的 美观 和 精确 度 上 痢 要 好 于 打字 输入 。 














(a) Andriod F (b) iOS 平 台 (c) Windows Phone 平 台 


图 2-18 三 大 平台 的 日 期 输入 播 选 功能 


3. 迎合 人 们 的 视觉 惯性 

应 用 界面 需要 各 种 图 形 特效 的 充实 ,例如 ,浮雕 和 阴影 就 是 最 易 产 生 视 觉 效 来 的 图 形 样 
式 。 但 是 在 设置 这 两 个 特效 的 时 候 , 要 注意 与 大 多 数 设 计 师 以 及 用 户 的 视觉 惯性 保持 一 致 。 
我 们 的 惯例 是 把 光源 设置 在 左上 角 ,也 就 是 对 于 "浮雕 效 果 "来 次 , 亮 部 在 左 侧 和 上 部 , 蜡 面 
在 右 侧 和 下 部 。 如 果 反 过 来 ,会 给 人 四 陷 而 不 是 是 起 的 感觉 。“ 阴 影 ” 也 是 一 样 , 出 现在 右 下 
部 时 给 人 弹 起 的 感 党 ,而 按 下 的 效果 通 第 在 图 形 的 左上 部 的 内 测 添 加 阴影 。 

通过 图 2-19(b) 我 们 可 以 清晰 地 体会 到 这 些 视觉 上 的 惯性 给 人 们 带 来 的 印象 , 恺 怕 没 
有 人 会 观察 到 ”“ 凸 起 "和 ”四 陷 ” 这 两 个 图 形 效果 是 完全 一 样 的 ,只 是 摆 放 的 方向 不 同 。 

4. 使 用 图 像 而 不 是 文字 来 描绘 信息 

人 们 识别 图 像 的 速度 要 远 远 超过 文字 ,而且 对 图 像 的 识别 还 会 触发 相关 信息 的 回忆 。 
因此 ,应 尽量 使 用 图 像 来 描绘 信息 或 表达 功能 ,例如 缩 上 略图 、 图 标 或 者 磁 贴 。 

图 2-20 中 的 两 球 应 用 展现 了 图 像 的 信息 传达 优势 。“Safari” 是 10S 平 台 最 第 用 的 网 页 
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play 


store 


top scores 





(a) Leballon (b) (c) Word Crasher 


图 2-19 i1OS 平 台 的 “Leballon”(51work6 产品 ) 和 “Word Crasher” 


iPod © 14:35 m- 
< 播放 列表 ”90 年 代 音 乐 。 播放 中 > 
NA Get Back 


EA The Beatles ' us 


^ Let It Be 


The Beatles i 






Pay No Mind (Snoozer) 
Beck M 


— A 
* iDS6 开 发 指南 | 国内 第 一 本 原创 iDS6 开 发 图 韦 - 从 0..， 
iOCS6 开 发 指南 


Isobel 
Bj fk 


-— vSM—uxNmSUOssyI-4o 
NAPD Store -A 


Girl Singing In The Wreck. 


Black Box Recorder 


Change 


Blind Melon 


Picture Of You 
» The Cure 





Longview 


Green Day ! ar 
二 一 "n 
cH. 4p 
az» 


(a) Safari (b) 音乐 





图 2-20 iOS 平台 的 “Safari> 和 ”音乐 ” 


ad ir » TE I HIIS 9a E D 3 ZU BÉ E eT o 8 f Hd HIS] EF 9 7r ox ETT UL ef Ze dU 
一 个 页 面 做 成 立体 缩 略 图 ,这 样 使 用 户 在 查找 的 时 候 非 常 直 观 , 无 须 阅读 文字 ,和 凭借 直观 的 
aa “音乐 ”应 用 也 是 同样 的 道理 ,对 于 搜索 音乐 专辑 来 说 ,专辑 
封面 的 图 像 远 远 比 文字 更 容易 被 人 注意 和 识别 ,当然 从 美观 上 就 更 不 用 说 了 ,因此 iOS 7 里 新 
版 的 “ 首 乐 ”应 用 一 改 传统 的 字母 分 类 列表 排放 ,而 加 入 了 专辑 封面 图 像 ,显得 既 美 观 又 直观 。 
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5. [EFIE SES JE EIE S 

"ARCA A ul dx cr ME HH TTL dee ,当然 也 包括 应 用 的 界 
面 设 计 。 那 么 在 分 割 画 面 的 时 候 , 完 全 可 以 有 意识 地 按照 这 个 比例 进行 把 握 。 相 信和 它 的 品 
位 和 美学 价值 吧 ,肯定 能 让 你 界面 的 整体 视觉 效果 增色 不 少 ( 见 图 2-21) 。 


epicurious (Q d. 


fana! iy Mar ryme x] 


à s J Ar pry herrira German Potato Salad 
.OMénteh 
Mem cm "1 


Oe m utl 


Date Consaieston Farmhouse Butterut Squash 


Dah Te Soup 
nm MTS eani sebo 4 mort 


mont Heritage n with 


gg - ———— 
= 





@ usa topay 


Butternut Squash A Apple Soup 





YOTI veo mouti mato a agas 
~ pee akoi 





li m D em 





(a) USA Today (b) Epicurious 


图 2-21 1OS 平 台 的 “USA Today” 和 “Epicurious” 





针对 界面 信息 丰富 或 屏 大 尺寸 较 大 的 平板 电脑 ,也 可 以 尝试 经 典 的 “ 井 ” 字 分 割 的 方法 
把 握 标 题 文字 和 图 片 的 位 置 ,避免 界面 松散 无 骨 、 杂 乱 无 草 。 当 然 , 这 里 的 “ 井 ” 字 并 不 是 指 
—— 而 是 一 种 使 界面 元 系 趋 于 规范 的 标尺 。 也 就 是 说 ,无 论 界面 上 的 元 系 

么 的 丰富 ,排列 多 么 的 复杂 ,只 要 把 画面 上 的 元 素 按 照 模 癌 和 纵 癌 的 三 等 分 去 填充 ,就 会 使 
ep i 和 稳定 的 感觉 。 因 此 这 种 调整 视觉 结构 的 方法 也 被 称 为 “三 分 法 ”。 








(b) App Store 


(a) Expedia 


图 2-22 ”1OS 平 台 的 “Expedia” 和 “App Store" 
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从 图 2-22 中 可 以 体会 到 " 井 " 字 形 的 三 等 分 方法 对 界面 元 素 视 觉 上 的 平衡 起 到 的 作用 。 
同时 也 应 该 注意 到 保持 界面 视觉 稳定 和 平衡 的 重要 性 ,虽然 对 于 初学 者 来 说 这 个 概念 有 操 
抽象 ,但 是 对 应 用 界面 整体 视觉 结构 的 把 握 , 以 及 整体 与 细 市 的 协调 和 统一 都 是 作为 设计 师 
时 刻 需 要 用 心 调整 和 把 握 的 。 在 后 面 的 董 节 中 ,还 会 继续 介绍 一 些 经 验 和 技巧 改善 界面 的 
视觉 体验 。 


2.2.6 ”图片 与 文字 的 视觉 关系 


在 2.2.5 市 里 , 提 到 了 应 用 的 界面 应 尽量 使 用 图 像 来 描绘 信息 或 表达 功能 ,文字 的 识别 
速度 不 如 图 片 快 ,同时 在 视觉 冲击 力 上 也 远 不 如 图 片 强烈 美观 。 因 此 ,应 尽量 多 地 使 用 图 
厂 、 照 片 以 及 图 标 等 图 形 元 系 来 充实 界面 。 而 文字 主要 作为 搭配 图 片 的 辅助 元 素 ,对 图 片 进 
41b e ELE RUE M o 

我 们 知 拓 ,移动 设备 上 的 应 用 要 适应 各 种 各 样 的 复杂 环境 和 状态 。 行 走 中 ,我 们 的 目光 
或 注意 力 很 难 完全 放 在 屏 硕 上 ,更 何况 设备 本 号 还 在 兄 动 着 ,因此 图 片 传 达 信 息 的 优势 就 更 
加 地 凸显 出 来 。 我 们 只 需要 轻 轻 一 曾 , 就 可 以 看 清 图 片 的 大 体内 容 和 少量 的 细 市 ,而 文字 则 
需要 逐一 地 识别 后 才能 理解 。 不 过 ,对 图 片 的 选择 也 是 非常 重要 的 ,粳米 的 图 片 有 时 其 至 还 
不 如 文字 好 全 。 那 么 什么 样 的 图 所 能 够 增强 视 党 的 吸引 力 和 表现 力 呢 ? 两 个 特征 : 一 是 像 
系 要 大 ,当然 ,这 个 要 受到 界面 布局 和 屏幕 大 小 的 限制 ,这 里 是 指 在 可 能 的 条 件 下 尽量 使 网 
Fr CK CEP RU RE s ER PRO; 二 是 尽量 选择 侧 单 . 干 闪 并 清晰 的 特 与 图 片 , 稍 单 是 为 了 证 岁 片 
表达 内 容 更 百 接 和 明确 ,使 用 户 能 够 集中 视 沉 注意 力 而 不 被 哈 社 和 夺 主 , 干 准 和 清晰 是 为 了 图 
片 的 美观 和 精致 ,而 特写 是 为 了 让 画面 有 一 个 能 够 吸引 眼球 的 视 沉 中心。 






































(a) Strum (b) Fotopediall!f ^|: HHA 


图 2-23 ”10OS 平 台 的 “Strum” 和 “Fotopedia Ef AE HH 7x" 








力 。 同 时 ,标准 的 特写 照片 使 界面 的 主题 更 加 鲜明 。 
当然 ,正确 选择 和 处 理 图 片 的 同时 ,也 不 能 忽视 对 文字 的 处 理 ,里 然 文 字 在 视觉 上 没有 
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图 片 重要 ,但 它 表 达 含 义 清 晰 、 准 确 且 全 面 的 特点 是 图 片 无 法 取代 的 。 那 么 应 该 如 何 把 握 文 
字 元 素 的 视觉 体验 呢 ? 

首先 ,要 尽量 避免 大 段 文字 的 出 现 , 简 短 的 文字 才能 勾 起 用 户 阅 读 的 欲望 ,而 宛 长 的 文 
字 会 让 人 感到 阅读 的 艰难 和 压力 。 

同时 ,如 果 无 法 避免 地 出 现成 段落 的 文字 ,一 定 要 使 文字 行 的 长 度 ( 也 就 是 文字 块 横向 
的 长 度 ) 短 一 些 , 哪 人 多 排列 几 行 , 尽 量 使 它 成 为 块 状 的 文字 组 ,而 不 是 大 片 的 文字 群 或 者 宛 
长 的 文字 行 , 最 好 把 它 也 变 成 像 图 片 一 样 的 块 状元 素 。 

而 且 , 文 字 要 和 图 片 相 呼 应 ,尽量 不 要 孤立 ,要 成 组 或 成 团 。 这 样 的 处 理 结 果 , 能 使 文字 
在 界面 里 变 得 非常 的 活跃, 成 为 了 可 以 随意 搭配 和 摆 放 的 图 形 元 素 。 
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(a) App Advice (b) You Tube 


图 2-24 10S ^E & Bj" App Advice" fl“ You Tube" 





可 以 看 到 图 2-24 中 的 两 款 应 用 中 的 文字 元 素 都 非常 有 序 地 和 图 片 结合 在 了 一 起 ,成 为 
了 有 机 的 组 合体 。 缺 少 了 文字 的 图 片 会 显得 很 单调 ,依附 在 图 片上 的 文字 本 身 也 形成 了 非 
常 活跃 的 图 形 元 素 。 

2.2.7 min ese 


三 大 平台 的 移动 设备 部 有 一 个 相同 的 交互 特点 LIEBE BI DEFE o FETIULA SUR 
横 屏 和 竖 屏 两 种 显示 模式 ,而 且 可 以 通过 重力 感应 相互 旋转 切换 。 那 么 在 设计 应 用 界面 时 
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也 需要 考虑 到 这 个 特点 。 当 然 , 并 不 是 所 有 的 应 用 都 非得 文 持 屏 谢 旋 园 。 

手机 上 的 应 用 默认 人 情况 下 一 般 是 以 坚 屏 模式 显示 的 ,这 与 手 的 抓 握 方式 有 关 。 所 以 
iPhone 手机 的 加 面 无 法 旋转 。 但 是 有 些 手 机 应 用 (主要 是 游戏 ) 由 于 和 宕 要 双手 操作 而 特 童 
设计 成 在 模 屏 模式 下 运行 。 而 iPad 束 比 较 特 殊 , 两 个 方 品 都 可 以 作为 默认 桂 式 ,比较 平等 ， 
因此 所 有 的 平板 电脑 的 昌 面 都 支持 转 屏 的 。 但 是 由 于 双手 抓 握 比较 平稳 舒适 ,所 以 平板 电 
脑 处 于 模 屏 模式 相对 多 一 些 ,在 模 屏 模式 下 运行 的 应 用 也 比较 多 。 

那么 在 设计 应 用 的 时 候 , 如 果 需 要 文 持 屏幕 旋转 ,情况 就 会 变 得 复杂 得 多 。 想 要 让 你 的 
应 用 界面 既 能 在 棋 屏 模式 下 也 能 在 竖 屏 模式 下 表现 优秀 ,需要 做 大 量 工 作 , 考 虑 很 多 细节 。 
因此 ,大 部 分 的 应 用 都 是 仅 文 持 在 一 个 方 回 的 屏 才 运行 。 为 文 持 转 屏 的 应 用 设计 界面 ,需要 
把 一 个 方向 上 的 效果 ( 通 第 是 竖 屏 ) 做 完美 之 后 再 考虑 男 一 个 方 回 的 旋转 ,因为 包括 界面 布 
局 、 按 钮 的 位 置 、 各 种 元 素 的 排列 以 及 每 一 个 细节 的 宽窄 和 大 小 ,都 需要 重新 地 调整 。 如 果 
你 只 是 把 所 有 的 元 系 机 械 地 对 号 入 座 到 为 一 个 方向 上 去 ,会 显得 极 不 协调 、 不 伦 不 类 ,还 不 
如 不 旋转 呢 。 
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图 2-25 ioOS 平 台 上 ”音乐 ”应 用 的 歌曲 列表 竖 屏 显示 和 横 屏 显示 


从 图 2-25 可 以 看 出 ,iOS 平 台 上 ”音乐 2 应 用 ,在 屏幕 旋转 之 后 发 生 了 很 大 的 变化 ,首先 
是 竖 屏 模式 下 的 列表 式 布 局 在 横 屏 模式 下 会 变 得 非常 拥挤 ,所 以 设计 师 果 断 地 把 布局 改变 
成 陈列 式 ,视觉 上 弥补 了 横 屏 的 不 足 。 其 次 是 由 于 横 屏 模式 下 上 下 空间 太 小 ,所 以 上 面 的 状 
态 栏 . 导航 栏 和 下 面 的 标签 栏 都 被 去 抒 。 通 过 这 个 实例 可 以 看 出 屏幕 的 旋转 过 程 绝 不 是 一 
件 人 简单 的 工作 ,而 是 需要 非常 丰富 的 布局 和 界面 元 素 设 计 经 验 。 

还 要 注意 ,在 屏幕 从 竖 屏 到 横 屏 旋转 的 过 程 中 很 多 元 素 会 被 压 遍 。 这 个 情况 一 般 出 现 
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在 手机 设备 上 ,因为 手机 的 屏幕 比较 小 ,所 以 垂直 空间 会 很 珍贵 ,对 空间 的 挤 压 可 以 节约 出 
很 多 的 空间 以 给 画面 的 完整 显示 。 
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图 2-26 iOS 平 合 的 ”Mail "在 屏幕 旋转 后 导航 栏 的 宽度 被 挤 压 


从 图 2-26 可 以 看 出 ,iOS 平台 的 "Mail ”应 用 在 屏幕 从 竖 屏 旋转 成 槛 屏 后 导航 栏 的 宽度 
从 44 像素 挤 压 成 32 像素 。 当 然 ,在 OS 平台 的 人 体 工 程 学 规范 里 ,44 像素 是 最 适合 点 击 
的 大 小 ,因此 挤 压 之 后 的 界面 势必 会 给 我 们 的 操作 带 来 一 些 困难 ,这 需要 设计 师 判 断 和 
BUS. 

KTERE AIETE YS I TD m SRIEE. 

(1) X BEBE SE Pe BU YT Ue XE Ze — Ma AR B. US B WE Je o WIAA DéNÉ? 因为 一 旦 你 
选择 了 转 屏 ,那么 无 论 应 用 有 多 少 个 界面 ,必须 都 能 旋转 。 不 能 有 的 能 转 有 的 不 能 转 , 这 样 
WE E RA 须 把 整个 应 用 的 全 部 细 世 考虑 清楚 后 ,再 决定 你 的 
界面 是 否 需要 文 持 旋转 。 只 有 一 个 例外 ,就 是 视频 播放 应 用 ,在 播放 视频 时 强迫 大 家 
fE HI ft Bi XUL me 

(2) 并 不 是 所 有 人 都 会 尝试 旋转 你 的 应 用 ,所 以 不 要 把 重要 的 功能 或 内 容 在 旋转 之 后 
隐藏 挤 。 而 且 并 不 是 所 有 的 应 用 都 适合 转 屏 ,有 时 刻意 的 旋转 会 使 用 户 迷 失 方 向 而 感到 
HZ 。 


2.3 iOS 平台 的 视 党 体验 


可 以 不 夸张 地 说 ,从 个 人 计算 机 诞生 开始 ,苹果 公司 在 用 户 体 验 设计 理念 以 及 视觉 体验 
方面 一 直 扮 演 着 主流 导向 和 引领 者 的 角色 。 尤 其 是 2001 年 推出 Mac OS X 之 后 ,精美 绝伦 
HIZK dà nuoc duod ende dii ccquam dia 在 各 个 平台 和 设计 领域 
里 争 相 效仿 。 而 作为 移动 应 用 的 第 一 大 平台 ,iOS 也 同样 继承 了 这 个 主流 角色 ,把 苹果 公司 
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精美 时尚 徐 约 、 细 腻 的 视觉 体验 特点 在 移动 设备 小 小 的 触摸 屏 上 发 挥 得 登峰造极 。 而 在 
2013 4E dB Hy 10S 7 里 ,苹果 公司 一 改 从 2001 年 Mae OS X 开始 的 传统 的 拟 物 化 视觉 风 
格 ,在 视觉 体验 上 进行 了 一 次 非 浓 大 胆 的 转 号 ,采用 了 更 加 侧 约 .时 尚 的 扁平 化 风格 作为 目 
己 的 视 党 主导 理念 ,可 以 算得 上 苹果 公司 的 一 次 重大 变 音 。 

虽然 大 家 可 能 对 这 些 名 词 和 变革 很 关注 、 很 熟悉 ,然而 拟 物 化 效果 和 扁平 化 风格 到 底 是 
怎样 的 形式 ?怎样 区 分 ? 各 自 具备 什么 样 的 视觉 特点 和 设计 理念 ? 臣 怕 还 会 有 些 含 混 。 作 
为 设计 师 ,必须 对 这 些 概念 有 一 个 全 面 而 次 刻 的 理解 ,这 里 将 和 读者 一 起 深入 襄 析 设计 师 眼 
中 的 iOS, 


2.3.1 JUPE MUR T E 


拟 物 化 风格 来 源 于 交互 设计 中 的 隐喻 的 处 理 手法 ,所 谓 隐喻 就 是 使 用 一 个 熟知 的 事物 
来 暗喻 为 一 个 事物 ,日 第 生活 中 的 “隐喻 ”可 以 使 语言 表达 生动 有 内 涵 。 例 如 ,我 的 手机 是 
我 的 宠物 ,他 的 老 效 是 个 母 老虎 。 而 图 形 设计 中 的 隐喻 也 是 同样 的 道理 ,使 用 现实 生活 中 的 
事物 代 巷 图 形 元 系 , 让 男 面 生动 、 易 懂 。 其 实 , 隐 喻 手法 从 很 早 使 用 计算 机 的 时 候 就 已 经 司 
空 见 惯 了 , 当 我 们 把 电子 文件 放 进 文件 夹 时 感觉 很 合理 也 很 正常 ,可 你 是 否 想 过 ,实际 上 根 
本 没有 什么 真实 的 文件 和 文件 夹 , 它 们 只 是 计算 机 里 复杂 的 数据 结构 ,如 果真 的 把 它们 背后 
的 程序 和 数据 呈现 在 你 面前 , 剑 怕 大 部 分 人 无 法 理解 。 因 此 可 以 感觉 到 ,图 形 隐喻 使 我 们 快 
速 掌握 了 计算 机 复杂 的 内 部 机 制 。 

为 了 让 移动 应 用 看 上 去 更 直观 亲切 ,操作 起 来 更 简单 好 用 ,在 设计 界面 时 要 善于 把 图 形 
隐喻 做 好 。 不 过 ,这 里 最 重要 的 就 是 要 选择 好 隐喻 的 对 象 ,一 定 要 使 用 己 一 眼看 上 去 就 能 理 
解 , 所 以 要 选择 日 稼 生活 中 和 见 的 、 能 被 大 多 数 人 熟知 的 事物 来 隐喻 我 们 的 功能 和 界面 。 可 
以 看 一 看 OS 平台 上 这 些 标准 控件 的 样式 : 一 舍 卡 片 、 电 灯 的 开关 、 老 式 的 仪表 、 收 首 机 上 
的 按键 和 滑 块 ……… 由 于 有 了 现实 生活 中 的 经 验 , 这 些 控件 看 上 去 一 目 了 然 , 无 需 进一步 
学 习 。 

做 好 界面 上 的 图 形 隐喻 还 有 一 个 好 处 , 那 就 是 让 大 家 从 视觉 上 感到 类 观 . 杀 切 ,喜欢 拿 
在 手 里 把 玩 。 这 就 要 求 设 计 师 把 这 个 隐喻 制作 得 很 深 完 ,而且 关键 是 要 很 遇 上 只。 而 这 个 细 
致 美化 和 扎 求 通 贞 的 过 程 就 是 拟 物化 风格 的 体现 。 

从 图 2-27 可 以 看 出 ,iOS 6( 包 括 之 前 的 版 本 ) 的 系统 及 应 用 界面 都 使 用 精致 的 拟 物 化 
效果 。“ 语 音 备 坏 录 ”就 是 一 个 很 典型 的 案例 ,精美 通 真 的 界面 并 没有 影响 应 用 简单 吻 用 的 
优点 。 而 iOS 上 的 “Vital Signs DB 是 一 款 测 量 并 记录 血压 等 生命 体征 的 医疗 应 用 ,可 以 随 
时 测量 你 的 血压 、 心 跳 速 度 和 饮食 规律 。 两 球 工 具 虱 非常 下 观 地 使 用 了 生活 中 相应 的 事物 
隐喻 了 应 用 的 功能 和 操作 方法 。 

对 于 拟 物化 风格 ,不 能 单单 停留 在 图 形 设计 和 视 沉 风格 上 , 想 要 达到 坎 真 的 物理 真实 
感 ,还 有 其 他 元 系 可 以 作文 草 , 比 如 声 首 ,振动 和 动画 。 在 旋转 按钮 的 时 候 , 如 果 同 时 发 出 暗 
险 的 机 械 声 音 , 会 是 什么 样 的 体验 ? 图 2-27 中 的 “ 语 首 备 走 录 ” 在 录 首 过 程 中 “VU” 指 针 会 
随 春 音 量 和 频率 而 摆动 ,这 些 细节 元 素 的 增加 会 使 用 户 在 使 用 应 用 时 增加 愉悦 感 。 但 是 , 拟 
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图 2-27 iOS 平 台 上 的 “ 语 首 备忘录 ”和 “Vital Signs DB" 





物化 效果 点 到 为 止 就 够 了 , 干 万 不 要 走 得 太 远 ,不 然 很 容易 做 得 恶俗 。 我 们 的 应 用 界面 是 服 
务 于 功能 的 ,不 能 含 本 求 末 。 过 于 迷恋 目 己 的 设计 反而 会 弱化 功能 的 效果 ,比如 在 使 用 动画 
的 时 候 , 不 要 让 动画 持续 太 久 而 影响 了 主体 内 容 的 展示 ; 幽默 的 效果 只 在 开始 几 次 能 让 人 
发 笑 , 之 后 就 会 使 人 厌倦 。 因 此 ,要 保持 清醒 ,所 有 的 元 素 都 是 为 了 用 户 体验 而 设计 ,不 是 为 
了 设计 而 设计 。 

扁 平 化 设计 风格 也 是 一 个 受 欢 迎 很 久 的 、 以 简约 主义 为 核心 的 设计 观念 。 随 痢 
Windows Phone fH ll, Android 4. 0 的 新 设计 以 及 10S7 的 发 布 ,这 种 趋势 最 近 更 加 流行 。 
遍 平 化 设计 就 是 不 使 用 任何 额外 效 采 的 设计 观念 ,去 挥 任何 3D 效果 ,没有 很 深 的 阴影 、 笠 
儿 、 立 体 浮 雕 、 渐变 或 者 其 他 方法 创建 的 凸 出 或 者 凹陷 效果 。 无 论 图 标 还 是 界面 元 素 , 它 们 
都 是 很 鲜明 的 剪影 ,只 有 边 绿 和 形状 ,没有 修饰 和 特效 。 所 谓 局 平 化 ,就 是 一 切 都 是 平 的 。 

忆 平 化 设计 并 不 是 拒绝 一 切 的 逆 饰 效果 。 首 移 , 它 关注 颜色 ,扁平 化 设计 通 稼 选择 使 用 
鲜艳 明亮 的 色彩 。 从 色 块 ` 图 形 . 栏 目 条 到 工具 栏 图 标 , 颜 色 都 是 一 个 关键 的 组 成 元 素 。 同 
时 , 它 还 关注 文字 。 很 多 扁平 化 的 设计 为 保持 简单 的 流程 和 感觉 ,只 会 包含 很 少 的 文字 。 
此 ,需要 注意 每 一 处 的 文字 长 度 。 如 图 2-28 所 示 。 

扁平 化 设计 还 有 一 个 很 重要 的 特征 , 那 就 是 对 层级 的 优化 。 简 单 地 说 ,就 是 这 些 信 息 之 
间 没 有 从 属 的 层级 关系 , 尽 可 能 地 把 内 容 放 置 在 同一 个 层级 或 页 面 内 ,上 再 看 壬 突 出 那些 与 核 
心 功 能 相关 的 交互 元 素 , 这 样 可 以 使 界面 得 到 最 有 针对 性 的 优化 和 简化 ,让 用 户 在 最 短 的 时 
间 内 清楚 地 识别 出 信息 和 功能 的 关系 ,并 且 很 容易 知道 接 下 来 应 该 做 什么 。 
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图 2-28 iOS 3E & I Spendee" RII X ^L" 


扁平 化 设计 风格 的 实现 过 程 并 没有 看 上 去 那么 简单 , 越 是 简约 的 图 形 其 实 越 难 设计 , 必 
须 把 注意 力 都 集中 到 每 一 个 细节 上 面 去 ,因为 没有 阴影 和 其 他 效果 去 遮盖 人 缺点。 虽然 大 多 
使 用 明亮 的 颜色 来 进行 设计 ,但 也 需要 使 用 黑 、 白 、 灰 这 样 的 灰 度 色 系 来 进行 过 渡 和 陪衬 。 
NER OS 7 的 扁平 化 革命 绝 不 仅 是 图 形 上 的 。 


2.3.2 iOS 7 的 视觉 新 体验 


除了 视觉 风格 上 的 变化 ,iOS 7 在 很 多 设计 细节 上 也 做 了 扁平 化 调整 ,而 这 些 调整 对 于 
设计 师 来 说 非常 重要 。 我 们 需要 在 这 些 细 节 上 一 一 对 照 ,调整 好 自己 应 用 界面 的 视觉 语言 
以 适应 10S 7 局 平 化 的 设计 风格 。 

首先 是 图 标 设 计 ,iOS 7 开始 引入 了 网 格 模板 设计 法 ,而 且 圆 角 设 计 不 同 于 此 前 各 版 本 
iOS 的 设计 ( 见 图 2-29)。 这 是 一 个 黄金 比例 的 网 格 系统 ,可 以 用 来 正确 地 调整 和 对 齐 图 标 
上 的 元 素 。 对 于 网 标 设计 的 初学 者 ,网 格 模 板 是 非常 重要 的 一 条 捷径 。 

在 10S 7 中, 旧 的 图 标 圆 角 已 经 不 见 了 ,苹果 引入 了 一 个 新 图 形 ,被 命名 为 “superellipse”。 
由 于 苹果 并 没有 发 布 官 方 的 图 形 模 板 ,所 以 不 少 设计 师 对 这 个 新 的 圆 角 比例 似乎 无 从 下 手 。 
迄今 为 止 ,个 人 认为 最 好 的 图 标 模 板 是 App Icon Template, WRX iOS 7 设计 图 标 , 这 个 模 
板 是 个 不 错 的 参考 。 和 往常 一 样 ,图标 圆 角 不 应 该 被 包含 在 最 终 的 输出 资源 中 ,但 如 果 想 为 
图 标 添 加 效果 (比如 描 边 和 阴影 ) ,那么 在 设计 过 程 中 还 是 需要 把 圆 角 考虑 进去 。 
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图 2-29 


iOS 7 图 标 设 计 的 网 格 系统 





页 面 的 细 市 变化 就 更 多 了 ,首先 是 状态 柱 , 虽 然 大 小 和 OS 6 一 样 ,但 是 内 容 和 外 观 发 


生 了 一 些 变 化 。 可 以 控制 


(黑色 和 白色 )。 在 10S7 
何 间隔 ( 见 图 2-30) 。 


dbi Ed, 


背景 颜色 ,以 适应 应 用 的 外 观 设计 。 也 可 以 使 用 默认 的 颜色 主题 
默认 的 大 部 分 应 用 中 ,状态 栏 和 导航 栏 是 融 为 一 体 的 ,中 间 没 有 任 
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(8) 'iOS 7 7 (b) iOS 6 


图 2-30 iOS 的 状态 栏 和 导航 栏 





通过 图 2-30 的 比较 我 们 还 可 以 观察 到 10S7 导航 栏 上 左右 两 侧 的 按钮 消失 了 ,采用 了 


无 边框 设计 ,文字 本 里 成 为 了 按钮 ,同时 在 左 侧 添加 了 表示 返回 的 图 标 。 这 





样 的 设计 比 过 去 


更 加 的 简洁 和 明确 ,也 提升 了 操作 的 效率 。 而 对 于 页 面 主 体内 容 ,iOS 7 通 第 不 会 去 添加 底 
色 , 但 是 有 时 会 为 了 增强 应 用 的 个 性 化 视觉 体验 而 加 入 肌理 或 渐变 ,我 们 通过 系统 原生 的 


"d ecok (LE 2-31)、“ 提 醒 事 项 ”和 “报刊 杂 


ZC》 


ZU 


等 应 用 可 以 体会 到 。 
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(a) 1OS 7 (b) iOS 6 


图 2-31 iOS 原生 的 “备忘录 ”应 用 


加 强 视 觉 上 的 层次 感 ,是 10S 7 在 视觉 交互 上 的 一 个 重要 观念 ,利用 半 透 明 寻 航 图 形 元 
素 和 动画 效果 来 展示 界面 和 元 系 之 间 的 层级 关系 。 这 是 应 用 设计 理念 的 一 次 重大 飞跃 ,而 
HME 1087 的 发 布 和 普及 ,这 些 效 果 很 快 就 会 成 为 用 户 期 望 当 中 的 一 部 分 。 状 态 位 以 完 
全 透明 的 形式 呈现 ,导航 栏 、 标 签 栏 `. 工 具 栏 和 其 他 一 些 控件 也 采用 了 半 透 明 化 的 处 理 方式 。 
而 且 全 新 的 控制 中 心 会 随 着 用 户 的 手势 从 屏 帮 瓜 部 癌 上 展开 ,并 禾 盖 在 系统 界面 或 当前 应 
用 界面 之 上 ; iOS 的 很 多 功能 和 应 用 被 局 平 放 置 在 了 这 个 没有 层级 的 空间 里 ,用 户 可 以 透 
过 其 半 透 明 毛 玻璃 育 景 看 到 下 方 界面 中 的 内 容 环境 ( 见 几 2-32) ,使 界面 更 容易 被 理解 ,并 
提升 用 户 的 愉悦 度 和 效率 感 。 














图 2-32 108 7 半 透 明 化 的 全 新 的 控制 中 心 


同时 ,iOS 平台 通常 将 表格 视图 的 数据 以 多 行 单列 的 列表 呈现 。 而 00S 7 为 单行 和 成 
组 的 表格 视图 引入 了 新 的 视觉 变化 ,去 控 了 多 余 的 线条 和 变化 显得 更 加 直观 和 清晰 ,通过 
图 2-33 可 以 一 目 了 然 。 

最 后 是 字体 , Helvetic 仍 是 IOS 默认 的 喘 文 字体 ,但 普通 文本 使 用 更 细 一 些 的 
Helvetica Neue, 而 不 是 此 前 的 粗 体 。 中 文 版 的 字体 也 从 原来 的 “ 简 黑 体 ” 变 成 了 更 细 的 “中 
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(a) iOS 7 (b) iOS 6 
图 2-33 10S 的 表格 视图 
等 线 体 ”。 需 要 突出 强调 的 文本 用 的 是 中 粗 字 体 , 比 如 导航 栏 中 的 标题 。 当 然 , 也 有 其 他 可 


选 的 字体 。 同 时 ,大 部 分 设计 元 素 上 的 字体 被 增强 了 ,与 普通 文本 纤细 的 字体 形成 了 对 比 ， 
不 仅 精 确 而 细腻 ,也 强化 了 视 党 的 印象 和 层次 感 ( 见 图 2-34). 
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图 2-34 iOS 中 文 版 的 字体 样式 





做 好 设计 的 前 期 工作 


设计 的 前 期 工作 主要 包括 应 用 的 市 场 定 位 产品 目标 以 及 用 户 需 求 分 析 三 部 分 。 可 
有 人 会 觉得 ,这 些 工作 听 起 来 似乎 并 不 像 设计 师 的 职员 , 倒 很 像 是 市 场 部 i ge 
工作 。 一 定 要 清醒 地 认识 到 ,这 些 工 作 表面 上 看 起 来 并 不 需要 设计 师 亲 目 去 做 ,但 是 一 定 要 
由 设计 师 来 主导 完成 。 因 为 应 用 设计 的 大 的 方向 一 定 要 准确 ,要 适应 市 场 、 贴 近 用 户 需 求 ， 
否则 即使 再 完美 、 再 党 完 的 应 用 也 是 空中 楼 阅 , 一 段 时 间 后 束 会 无 人 间 津 。 因 此 ,应 该 格外 
重视 设计 前 期 工作 的 这 三 个 步骤 。 

怎样 才能 设计 出 受用 户 青 睐 的 移动 应 用 ?这 需要 在 确立 项 目的 同时 ,能 够 冷静 地 分 析 
目 己 的 设想 ,理性 地 定位 目 己 的 市 场 目标 及 用 户 需 求 , 深 入 地 了 解 所 面 对 的 这 个 庞大 的 用 户 
群体 ,针对 他 们 的 需求 .习惯 和 欲望 ,做 有 价值 的 、 能 触动 人 心 的 应 用 。 


3.1 移动 应 用 的 市 场 定位 


we 的 应 用 成 为 一 个 真正 的 移动 应 用 产品 ,而 不 是 其 他 东西 (比如 计算 机 
上 的 软件 或 是 遥控 带 ) 。 它 必须 建立 在 对 移动 产品 性 能 的 了 解 以 及 用 户 使 用 习惯 的 基础 之 
Es ee a ee 则 不 适合 ,大 家 更 愿意 在 计 
算 机 上 或 用 其 他 设备 完成 。 


3.1.1 是 移动 产品 ,不 是 计算 机 软件 


你 ngon 移动 应 用 ? 作为 开发 者 .设计 师 或 者 程序 员 ,我 们 都 应 该 在 开始 工作 
前 认真 地 想 一 想 。 无 论 你 的 应 用 是 拥有 强大 的 功能 ,还 是 出 奇 的 内 容 , 或 者 是 高 科技 的 花 
样 HI e 当 我 们 到 达 办 公 室 或 回 到 家 里 ,我 想 不 管 是 工作 、 上 网 
还 是 看 视频 、 玩 游戏 ,都 会 有 比 移 动产 品 更 合适 的 选择 。 我 们 没有 必要 也 不 可 能 把 应 用 做 得 
能 和 相应 的 产品 相 媲 美 我 们 不 可 能 用 照片 美化 应 用 代 蔡 Photoshop 软件 ,也 不 可 能 在 
移动 产品 上 输入 文字 的 时 候 找到 按键 盘 的 感 党 和 速度 ,更 不 可 能 拿 军 小 的 移动 屏幕 和 液 品 
显示 种 相 比 。 
那么 ,移动 设备 的 优势 是 什么 ?” 智能 、 随 机、 不 受 环 境 和 空间 的 约束 ,便捷 地 处 理 简 单 
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任务 。 

在 开发 移动 应 用 产品 的 时 候 , 要 充分 考虑 它 的 优势 和 局 限 。 有 些 应 用 是 针对 移动 和 户 
外 活动 而 设计 开发 的 ,那么 它们 的 优势 是 不 可 符 代 的 。 例 如 ，iBird Explorer Plus”( 乌 探 ) 
LE 3-1(a) ) 是 为 马 类 爱好 者 在 野外 观察 乌 类 .识别 羽毛 和 叫 声 的 指南 。 当 然 , 这 也 是 直接 
针对 特定 用 户 的 一 个 很 好 的 例子 , 想 一 想 那些 长 年 在 野外 工作 的 动物 研究 者 们 ,这样 的 应 用 
是 多 么 的 贴心 。 例 如 ，Star Chart”( 星 图 ),( 见 图 3-1(b)) 是 目前 日 本 和 法 国 销 量 最 佳 的 一 
款 教育 应 用 程序 ,只 要 将 移动 设备 指 回 天 空 ,应 用 将 准确 地 指出 你 正在 观看 的 天 体 。 它 采用 
了 最 先进 的 GPS 技术 、 加 上 精确 的 三 维 宇 宙 图 ,让 所 有 的 天 文 爱 好 者 和 喜欢 对 着 星座 许愿 
的 女生 们 体验 到 了 名 副 其 实 的 高 科技 生活 。 
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(a) iBird Explorer Plus (b) Star Chart 
3-1 iOS 平 台 上 的 “iBird Explorer Plus" fl Star Chart" 

这 两 球 应 用 都 是 针对 用 户 在 移动 状态 或 户外 环境 而 打造 的 ,不 但 贴近 生活 而 且 能 针对 
特定 的 用 户 群 体 , 就 像 是 为 移动 平台 而 生 的 。 更 重要 的 ,是 设计 团队 在 应 用 设计 的 初期 确定 
了 一 个 非常 正确 的 产品 目标 和 市 场 定 位 ,而 且 始 终 在 不 断 地 完善 这 个 核心 功能 ,把 它 打造 得 
非常 细致 旦 操作 简单 。 

3.1.2 外 表 华 丽 还 是 功能 剖 大 


有 些 设计 师 ( 包 括 曾 经 的 我 ) 总 是 天 真 地 认为 只 要 把 应 用 界面 设计 得 好 看 、 华 丽 、 可 爱 ， 
用 户 就 一 定 会 严 账 。 从 项 目 构思 的 第 一 时 间 开 始 , 满 脑子 想 的 都 是 怎么 能 把 它 弄 得 有 视觉 
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感 ,能 够 吸引 眼球 。 可 现实 总 是 残酷 的 ,我 们 精心 设计 出 来 的 图 标 只 被 他 们 飞快 地 上 明了 一 
HR ,精美 的 界面 根本 没有 被 打开 。 
华丽 、 丰 定 的 视觉 效果 可 以 成 为 游戏 的 界面 .网 页 上 的 个 人 空间 、 杂 志 的 封面 或 者 是 随 
时 部 可 能 会 弹出 的 商品 广告 ,但 是 并 不 一 定 适 合 移动 应 用 ,尤其 是 手机 应 用 的 界面 ,原因 有 
iq 
m 本 末 倒 置 ,丰富 的 色彩 变化 或 者 是 过 多 的 特效 容易 弱化 应 用 的 主体 功能 ,分 散 注 意 
力 , 让 视线 很 难 集中 到 主体 事件 上 ,使 用 户 眼花 纺 乱 、 无 所 适 从 ， 
m 当 费 空间 ,过 多 的 逆 饰 和 特效 会 使 本 就 不 大 的 屏幕 变 得 拥挤 ,增加 了 用 户 使 用 的 难 
度 ,当然 ,过 多 的 装饰 也 会 加 大 应 用 的 体积 ,下 载 和 打开 的 速度 都 会 变 慢 ,得不偿失 ; 
m 成 本 上 升 ,华丽 的 效果 会 给 程序 员 增 加 很 大 的 工作 量 , 不 但 延长 了 开发 时 间 , 而 且 收 
效 甚 微 。 
"i EpL] pp" CILE] 3-2(a)) 是 App Store 上 一 球 很 有 风格 的 应 用 ,第 一 次 打开 这 于 应 
用 的 时 候 我 者 实 对 它 的 界面 设计 折服 了 一 看 一 一 厚重 的 复古 设计 、 精 致 的 仿真 细 市 ,让 人 其 
至 仿佛 闻 到 十 旧 的 家 上 共 上 散发 出 来 的 沉香 味 , 这 绝对 是 设计 局 手 的 杰作 。 可 当 我 打算 用 它 
设置 一 个 闹钟 的 时 候 , 却 在 这 个 华丽 的 界面 上 困惑 了 半天 ,因为 这 些 精致 的 按钮 总 让 我 感觉 
必须 谨慎 地 操作 才能 成 功 。 最 终 我 放 痉 了 这 个 “精美 的 艺术 品 ”, 虹 不 犹豫 地 打开 了 iPhone 
系统 自 带 的 闹钟 功能 ( 见 图 3-2(b)) ,原因 是 它 非 常 简易 和 直观 。 
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成 熟 的 设计 师 不 应 该 把 视觉 创意 和 视觉 效果 作为 衡量 设计 的 唯一 标准 ,尤其 是 在 用 户 
体验 设计 领域 里 ,界面 设计 是 亲 和 体 贴 地 服务 用 户 还 是 在 用 户 面 前 急功近利 地 炫 炊 自己 的 
特技 ,这 是 很 容易 识别 出 来 的 。 

当然 ,外表 不 华丽 可 不 意味 着 应 用 不 美观 、 不 时 尚 , 没 创意 。 我 们 要 在 设计 图 形 和 图 像 
之 前 建立 完整 的 设计 目标 , 即 搭建 一 个 合理 的 .人 性 化 的 框架 ,确定 好 应 该 突出 什么 ,弱化 什 
么 ; 该 先 看 到 什么 ,后 看 到 什么 。 千 万 不 要 用 浮华 的 效果 喧 宾 夺 主 ,要 将 所 有 的 东西 融入 到 
先前 构建 的 这 个 框架 整体 中 去 ,这 也 是 OS 7 简约 的 扁平 化 设计 理念 的 重要 环节 。“Dots” 
ILAI 3-3) 就 是 一 款 既 美观 大 方 又 简单 好 用 的 游戏 作品 。 可 以 感觉 到 ,平庸 无 奇 的 连 线 游 
戏 经 过 了 人 性 化 的 设计 和 扁平 化 的 细节 处 理 , 可 以 带 来 高 享受 的 用 户 体验 。 

更 重要 的 是 ,设计 要 能 够 与 移动 设备 和 使 用 环境 相 适 应 ,同时 还 要 适应 iOS, Android, 
Windows Phone 等 多 个 移动 应 用 平台 的 移植 ,这 才 是 完美 而 专业 的 设计 。 后 文 将 针对 上 述 
内 容 继 续 分 享 我 们 的 经 验 和 技巧 。 
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图 3-3 ”1OS 平 台 的 “Dots” 游 戏 


现在 可 以 理解 了 ,外 表 不 用 那么 光鲜 , 毕 竞 用 户 使 用 我 们 的 产品 是 基于 它 的 功能 ,所 以 
要 用 强大 的 功能 来 弥补 ,使 应 用 能 够 处 理 更 高 难度 的 事情 和 拥有 更 加 全 面 的 功能 ,这 样 的 想 
法 在 项 目 初 期 是 非 第 合理 而 且 也 是 值得 提倡 的 ,因为 这 样 才 能 更 好 地 激发 想象 力 和 创造 力 。 
放 开 思路 ,用 头脑 风暴 在 白板 上 画 得 满 满 的 。 当 然 , 风 骏 过 后 终究 要 面 对 现 实 : 你 的 应 用 好 
用 吗 ? 
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现在 来 看 看 用 户 是 怎样 使 用 移动 产品 的 : 他 们 通常 会 在 一 边 往 商场 的 时 候 , 一 边 拿 出 
手机 迅速 地 在 网 页 上 碍 看 网 店 的 报价 ; 会 在 服务 员 端 上 一 份 菜 看 的 时 候 , 赶 紧 用 手机 扣 下 
来 ,然后 发 到 微 博 上 去 ; 会 在 超市 收银 台 前 排队 的 时 候 , 趁 机 打开 新 闻 中 心 看 看 今天 的 头 
条 ; 会 在 银行 营业 大 厢 等 号 的 时 候 , 拿 出 平板 电脑 看 看 股市 或 者 比较 一 下 汇率 ……, 发 现 T 
四 ? 他 们 做 的 事情 好 像 难 度 部 不 大 ,除非 迫不得已 ,否则 谁 也 不 会 愿意 在 移动 产品 上 完成 那 
些 高 难度 的 工作 一 一 这 类 事情 人 们 更 愿意 到 计算 机 上 去 操作 。 问 题 的 关键 是 ,他 们 需要 一 
DAA FELE R ,一 边 还 要 观察 看 周围 的 环境 (可 别 过 了 竺 办 的 事 儿 1 ,所 以 他 们 对 应 用 程序 
的 直观 需求 除了 美观 之 外 ,就 是 最 好 直接 完成 或 打开 , 既 不 愿意 等 ,也 不 愿意 想 ,更 不 愿意 找 。 

我 们 都 知道 ,小 小 的 手机 或 Pad, 又 轻 又 薄 , 便 件 高 度 集成 ,虽然 各 大 生产 广 商 不 断 地 在 
升级 便 件 配置 ,但 是 系统 和 唤 源 终归 是 有 限 的 , 屏 医 大 小 更 有 限 。 每 增加 一 个 功能 点 , 郡 是 在 
抢夺 这 些 有 限 的 系统 资源 和 屏 疾 位置。 功能 是 强大 了 ,应 用 的 体验 却 降低 了 。 为 了 打开 应 
用 ,用 户 们 需要 等 更 长 的 时 间 ; 由 于 功能 增多 ,他 们 需要 更 加 耐心 地 去 寻找 和 选择 ; 由 于 按 
钮 增加 ,他 们 需要 更 加 细心 地 去 操作 小 小 的 界面 ……… 。 而 且 , 用 户 通 常 不 会 按照 我 们 给 他 们 
安排 好 的 路 径 操作 ,他 们 只 会 在 我 们 的 应 用 里 寻找 他 们 需要 的 和 可 以 利用 的 东西 ,一 旦 发 现 
没有 想 要 的 或 者 没 能 达到 预期 效 采 ,他 们 会 无 视 我 们 精心 为 他 们 打造 的 强大 功能 , 坚 不 犹 殉 
地 抛弃 。 

作为 一 个 首 乐 爱好 者 ,我 一 直 在 挑选 一 球 适 合 我 的 首 乐 播放 紫 , 起 初 10S 上 原生 的 音 
乐 播放 融 让 我 很 满意 ,如 清晰 的 歌曲 进度 .醒目 的 字体 和 按键 且 分 类 有 序 。 不 过 随 厦 我 对 功 
能 要 求 的 增加 ,我 选择 了 功能 更 加 强大 和 多 样 的 “EZmp3”( 见 图 3-4 C200 ,不 但 功能 多 样 , 而 
昌 还 文 持 在 线 播放 、 搜 索 和 下 载 。 和 大 部 分 首 乐 迷 一 样 ,我 在 手机 里 下 载 7 成 二 上 万 首 歌 
曲 , 时 间 长 了 ,如 新 大 旧 了 ,我 就 会 不 停 地 挑选 歌曲 和 专辑 ,“ 下 一 曲 ” 和 “播放 列表 ”就 成 了 我 
点 击 最 频繁 的 按钮 。“EZmp3” 那 拥挤 的 页 面 、 军 小 的 列表 项 和 纤细 的 字体 弄 得 我 总 是 误 操 
作 , 有 时 候 要 离 得 很 近 才 能 看 清楚 。 后 来 我 还 是 重新 选择 了 OS 的 原生 应 用 “ 首 乐 *《 见 
图 3-4(b)) . Z iOS 7 的 改 恨 ,播放 界面 更 加 简 污 和 醒目 ,使 我 选择 歌曲 的 时 候 很 有 效率 ， 
只 需要 晕 一 眼 屏 硕 就 不 会 误 操 作 , 只 要 能 够 随心 所 欲 地 选择 和 播放 豆 欢 的 歌曲 ,其 他 的 附加 
功能 都 是 浮云 。 

现在 理解 了 好 的 用 户 体 验 应 该 是 什么 感 党 , 驶 是 要 勇敢 地 爹 弃 元 余 的 功能 ,突出 主体 功 
能 ,并 且 善 于 把 辅助 功能 “ 藏 起 来 "。 所 以 ,设计 一 球 好 的 移动 平台 应 用 ,不 但 要 有 丰富 的 想 
象 力 ,也 要 善于 克制 。 认 真 地 分 析 、 调 人 研 和 测试 ,看 看 什么 样 的 功能 真正 抓 住 了 用 户 所 需 、 所 
AU ,什么 样 的 功能 可 以 延长 应 用 的 寿命 ,什么 样 的 功能 属于 画 蛇 添 足 , 更 重要 的 是 要 注意 保 
持 应 用 的 简捷 、 高 效 。 

"The Typography Manual”( 字 体 排 版 手册 )( 见 图 3-5) 是 一 款 专门 针对 设计 师 的 字体 
排版 速 查 手 册 , 界 面 人 简洁 大 方 , 操 作 快 速 便捷 。 关 键 是 抓 住 了 设计 师 们 的 工作 习惯 ,里 面 的 
“字体 大 小 计算 带 ” 和 “字体 标尺 ”虽然 功能 非常 简 单 , 但 很 实用 。 无 论 是 印刷 排版 还 是 网 页 、 
和 界面 排版 ,我 都 会 随时 打开 这 区 应 用 进行 参照 。 如 此 操作 简单 .方便 好 用 的 工具 我 怎么 舍得 
把 它 从 系统 里 移 除 呢 ? 
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图 3-5 ” iOS 平台 的 “The Typography Manual" 
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3.1.3 别 让 它 “ 大 而 全 ” 


有 些 应 用 与 计算 机 软件 或 其 他 产品 的 界限 就 不 是 那么 明显 ,它们 很 像 是 计算 机 软件 的 
微缩 版 或 是 简化 版 ,比如 微 博 、 内 置 网 页 浏览 带 、 记 事 本 等 。 那么 ,这 一 类 应 用 如 何 能 够 体现 
出 移动 应 用 的 优势 来 呢 ? 那 就 要 看 看 在 移动 设备 上 做 的 事情 与 计算 机 上 有 什么 不 同 : 在 路 
上 在 运动 中 在 超市 里 排队 的 时 候 , 用 户 处 理 的 不 可 能 是 复杂 或 精细 的 任务 ,只 会 处 理 一 些 
简单 的 ,临时 的 或 者 说 是 微 任务 。 因 此 ,在 设计 移动 应 用 的 时 候 , 完 全 可 以 握 弃 挥 那 些 不 适 
合 在 移动 平台 上 使 用 的 功能 ,保留 那些 适合 单 手 操 作 或 者 简单 的 双手 操作 的 功能 ,没有 必要 
把 计算 机 软件 中 所 有 的 功能 都 做 出 来 。 通 过 前 面 的 讨论 也 可 知道 ,过 多 的 功能 只 会 增加 使 
用 的 难度 、 降 低 使 用 的 效率 ,大 而 全 的 应 用 是 不 可 取 的 。 

我 们 需要 对 计算 机 软件 进行 提炼 、 瘦 映 和 重新 搭建 ,使 它 不 但 能 够 在 移动 平台 上 运行 ， 
还 要 适 合 在 移动 平台 上 操作 ,当然 在 这 里 只 进行 简单 的 或 初步 的 操作 ,深入 或 高 难度 的 还 旦 
留 给 计算 机 来 完成 吧 。 我 们 不 能 在 移动 设备 上 作 图 但 是 可 以 对 图 请 进行 修 甬 和 拼 贴 发 到 互 
联网 上 ,我 们 不 能 指望 在 手机 上 长 篇 大 论 但 可 以 发 表 简 短 的 微 博 和 评论 ,在 小 小 的 移动 屏 攻 
上 浏览 门户 网 站 很 费劲 ,我 们 可 以 下 载 各 大 门户 网 站 的 移动 客 己 闫 …… 所 以 ,我 们 要 为 移动 
平台 量 喘 打造 相应 的 产品 ,而 不 是 把 计算 机 软件 照搬 上 去 , 变 成 无 所 不 能 的 大 而 全 。 

QuickofficeC IL E] 3-6) 就 是 一 个 修 勇 和 瘦身 做 得 很 好 的 例子 ,这 个 在 计算 机 上 功能 强大 
到 无 所 不 能 的 Office, 在 这 里 被 打造 得 相当 精怪 。 比 如 ,由 于 你 的 手指 无 法 在 小 小 的 移动 屏 
幕 上 修改 复杂 的 表格 和 排列 图 片 , 所 以 在 Quickoffice 上 表格 和 图 片 只 能 显示 ,不 能 编辑 。 
同时 ,对 于 简单 的 文字 、 格 式 的 编辑 , Quickoffice 则 设计 得 非常 人 性 化 ,操作 简单 .易于 修 
改 , 比 如 粗 体 、 和 斜体 、 项 目 列表 、 文 本 对 齐 每 。 然 而 , 比 起 一 般 的 移动 应 用 来 说 , 它 的 结构 也 算 
比较 豚 肿 的 ,但 是 作为 一 款 能 够 对 文本 进行 阅读 .创建 、 编 辑 和 保存 的 应 用 来 说 , 它 已 经 非常 
X. 
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图 3-6 1OS 平 台 上 的 Quickoffice 
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在 多 如 牛 毛 的 移动 应 用 之 中 ,每 一 个 移动 用 户 虱 在 挑选 自己 逢 要 的 那 一 球 , 束 像 从 满 江 
的 一 箱 工 具 里 挑选 最 顺手 的 一 把 工具 。 所 以 ,不 能 指望 你 的 应 用 是 全 能 的 ,其 实 我 们 都 明 
日 , 越 是 全 能 的 工具 ,往往 用 起 来 越 不 顺手 。 应 用 更 是 这 样 ,完美 的 应 用 只 专注 于 一 项 工作 
或 一 种 任务 ,没有 必要 把 所 有 的 事情 痢 做 完 。 越 是 增加 应 用 的 功能 点 或 者 是 任务 的 窗 盖 面 ， 
用 户 就 越 搞 不 清楚 你 的 应 用 到 的 是 干什么 用 的 、 不 知道 什么 时 候 该 使 用 它 。 


3.1.4 它 只 是 成 千 上 万 个 应 用 中 的 一 个 


WR 10S 平台 是 一 座 摩天 大 楼 ,我们 的 作品 只 是 一 个 小 小 的 窗户 ,人 们 只 有 使 用 了 , 才 
知道 这 个 产品 多 么 优秀 。 当 然 ,我 们 可 以 用 精美 的 图 标 吸 引用 户 , 不 过 想 要 真正 地 抓 住 用 
户 , 除 了 要 个 性 人 鲜明 ,也 要 使 日 己 的 作品 能 够 融入 到 这 个 移动 平台 大 家 性 里 去 ,所 以 在 设计 
应 用 之 前 ,必须 明确 它 的 功能 点 ,明确 它 所 在 的 分 类 以 及 任务 方向 ,确切 地 说 , 那 就 是 找到 应 
用 所 扮演 的 “角色 ”。 

3.1.3 市 里 谈 到 了 聪明 的 设计 师 不 会 去 做 那 种 “大 而 全 ”的 应 用 ,因为 越 是 想 覆 六 更 多 
的 功能 , 越 是 适得其反 ,使 用 户 搞 不 清楚 什么 时 候 该 用 这 个 产品 。 因 此 ,要 精心 地 打造 一 款 
只 针对 一 项 工作 的 产品 ,集中 精力 ,不断 地 改进 和 简化 ,尽量 做 得 完美 。 只 有 这 样 才 能 让 用 
户 记 得 它 ,在 想 要 做 同类 事情 或 者 遇 到 相应 任务 时 想到 它 。 

必须 面 对 事 实 ,你 的 应 用 不 是 孤立 的 , 它 只 是 成 千 上 万 应 用 中 的 一 个 。 要 允许 你 的 应 用 
和 其 他 应 用 共同 工作 .和 谐 相 处 。 在 用 户 的 移动 设备 上 , 它 与 众多 的 其 他 应 用 为 邻 , 它 们 各 
司 其 职 , 共 至 大 移动 设备 的 资源 和 空间 ,有 时 相互 传递 信息 ,有 时 还 要 相互 苑 争 。 那 么 这 时 
候 , 如 果 你 的 应 用 能 够 少 一 些 封闭 和 独断 ,多 一 些 和 谐 \ 融 入 大 众 , 用 户 会 非常 欣 芝 和 认可 ， 
认为 你 的 应 用 是 大 家 上 默认 而 且 可 靠 的 选择 。 尤 其 是 在 设计 系列 应 用 的 时 候 , 更 要 注意 它们 
的 统一 性 和 关联 性 。 

我 们 的 很 多 工作 、 任 务 和 娱乐 都 不 是 单一 的 一 项 应 用 就 能 完成 的 : 如 末 微 博 里 需要 加 
AES Fr ,应 用 会 引导 你 跳 转 到 照 记 浏览 功能 里 ; 在 记录 朋友 电话 号 人 码 的 时 候 别 饼 记 给 他 扫 
一 张大 头 照 ,所 以 把 号 码 存 人 人 名片 夹 的 时 候 可 以 顺便 跳 转 到 拍照 功能 ; 在 浏览 网 页 的 时 候 ， 
会 把 有 价值 的 文字 或 图 请 复制 下 来 ,粘贴 到 记事 本 里 或 者 直接 打开 电子 邮件 ,发 送 到 邮箱 
里 ,以 便 日 后 在 计算 机 上 继续 编辑 。 我 们 不 应 该 设计 一 丈 应 用 有 既 能 浏览 网 页 ,存储 照片 ,还 
能 收发 电子 邮件 和 充当 记事 本 。 因 此 ,好 的 应 用 不 但 专 一 而 且 开 放 , 能 够 和 其 他 应 用 和 平 相 
处 ,尤其 是 系统 原配 的 功能 ,把 它们 的 功能 为 我 所 用 ,也 慷慨 地 贡献 目 己 的 功能 去 给 别人 妆 
配角 、 打 下 手 。 昌 然 可 以 寄 希 望 于 我 们 的 应 用 能 够 自 成 体系 ,但 绝 不 能 让 它们 上 自我 封闭 .大 
权 独 的 ,更 不 能 要 求 用 户 对 你 的 应 用 绝对 忠诚 。 

所 以 ,要 安 下 心 来 ,脚踏实地 地 把 应 用 里 的 关键 功能 做 专业 、 做 精致 。 善 于 从 系统 原 有 
的 应 用 中 吸收 信息 和 材料 。 同 时 ,次 要 功能 如 果 和 其 他 应 用 的 主体 功能 重合 , 那 完 全 可 以 放 
径 , 设 一 个 控件 直接 跳 转 或 链接 过 去 (有 些 功能 实在 难以 割舍 ,也 可 以 答 试 万 开发 一 个 应 用 
使 之 成 为 应 用 系列 ) 。 这 方面 做 得 比较 好 的 应 用 有 很 多 ,iOS 平台 的 “Fotolr 相册 ”( 见 图 3-7) 
束 是 一 个 很 好 的 案例 ,这 是 一 于 很 实用 也 很 精美 的 应 用 ,虽然 相册 类 的 应 用 非常 多 ,但 是 它 
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能 够 在 设备 之 间 批 量 地 传输 照片 的 功能 ,加 上 极 具 个 性 又 细节 精致 的 界面 设计 ,让 包括 我 在 
内 的 很 多 移动 用 户 无 法 抗拒 。 软 件 功能 强大 而 全 面 的 背后 ,是 iOS 平台 的 一 系列 功能 和 应 
用 的 文 援 和 衬托 。 图 像 和 照片 的 导入 是 依靠 移动 设备 的 拍照 功能 、 剪 切 功能 和 图 片 浏 览 右 ， 
而 图 片 的 输出 依靠 了 蓝牙 功能 、WiFi 功能 及 iOS 邮箱 ,同时 还 具备 着 不 可 或 缺 的 文件 加 密 
功能 以 及 利用 App Store 应 用 网 上 更 新 的 功能 。 从 表面 上 看 ,我 们 是 在 使 用 一 款 单一 的 图 
像 管理 应 用 ,而 事实 上 是 它 与 多 个 应 用 共同 的 工作 结果 。 因 此 ,在 开发 和 设计 应 用 产品 的 时 
候 , 尺 量 不 要 让 它们 太 封 闭 。 打 开 围 墙 ,才能 让 它们 更 丰富 ,更 有 活力 。 

当然 ,我们 的 应 用 仍然 是 独一无二 、 充 满 个 性 的 , 它 可 以 和 其 他 软件 和 睦 相 处、 互通 有 
无 ,但 是 它 的 优势 却 是 不 可 替代 的 ,这 样 才 能 凸显 出 它 的 价值 。 接 下 来 的 问题 是 如 何 才能 够 
让 我 们 的 应 用 脱颖而出 ,成 为 成 千 上 万 个 应 用 中 比较 里 越 的 一 个 。 
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图 3-7. iOS 平 台 的 “Fotolr 相册 ” 
设计 一 款 移动 应 用 产品 ! 那么 ,作为 一 名 专业 的 用 户 体验 设 





现在 ,我们 明白 了 方 回 
计 师 ,应 该 怎样 使 我 们 的 移动 应 用 既 简 单 `. 又 好 用 , 且 好 看 呢 ? 后 文 将 会 按部就班 地 针对 移 
关键 是 要 你 持 对 用 户 的 








动用 户 体 验 设计 中 的 每 一 个 环节 ,依次 分 享 我 们 的 经 验 和 方法 
分 析 和 对 移动 产品 的 定位 。 
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3.2 确定 产品 目标 








不 耸 张 地 说 ,我 们 每 一 个 人 部 已 经 离 不 开 移 动产 品 和 应 用 平台 , 它 已 经 成 为 我 们 生活 的 
一 部 分 。 它 渐渐 取代 了 书刊 .报纸 ,取代 了 收音 机 、 电 视 机 ,我 们 用 它 严 东西 . 订 矢 馆 , 用 它 聊 
天 交友 ,其 至 把 它 当 成 了 日 己 的 事业 …… ,有 时 候 我 甚至 党 得 ,生活 就 是 从 一 个 应 用 切换 到 
另 一 个 应 用 中 去 。 而 作为 一 名 移动 应 用 开发 .设计 人 员 , 愁 人 更 加 关心 的 是 目 己 的 应 用 一 一 
它 是 不 是 在 移动 商店 里 ,是 不 是 受 人 们 关注 ,功能 是 不 是 很 稳定 ,是 不 是 比 别 的 同类 产品 好 
用 …… 梦 想 厦 有 一 天 ,全 世界 的 移动 平台 只 提供 目 己 应 用 的 下 载 ,全 世界 的 人 都 在 使 用 自己 
的 产品 。 可 惜 , 如 果真 是 这 样 的 话 , 那 就 不 是 移动 应 用 了 ,因为 移动 应 用 的 真正 魅力 所 在 就 
是 它 的 多 样 .丰富 和 无 穷 无 尽 。 那 么 既然 已 经 有 这 样 庞大 的 一 个 应 用 数量 ,我 们 还 需要 继续 
的 开发 ,生产 移动 应 用 产品 吗 ? 


3.2.1 做 有 价值 的 应 用 


作为 移动 应 用 的 用 户 体验 设计 师 ,我 们 的 使 命 和 目标 不 是 跟随 和 模仿 潮流 ,而 是 不 断 地 
创新 和 挖掘 ,做 有 价值 的 应 用 产品 。 

在 ioOS 平 台 的 4 人 机 界面 指责》 中 , 平 末 公司 为 我 们 归纳 了 应 用 设计 的 定位 方法 ( 见 岁 3-8), 
它 把 移动 应 用 归结 为 5 个 设计 方向 ,距离 图 中 坐标 原点 位 置 越 远 的 应 用 ,特点 越 明显 ,能够 与 
其 他 苋 争 者 明显 区 分 开 来 。 而 距离 原点 越 近 的 应 用 越 兼顾 其 他 性 质 和 功能 ,比较 实用 和 全 面 。 


Serious 
(重要 ) 






































Entertainment : 
(娱乐 ) Tool 
üii (LB) 


Fun 


(有 趣 ) 
图 3-8 10S 平台 的 4 人 机 界面 指南 》 中 归纳 的 应 用 设计 的 定位 方法 
这 里 建议 在 功能 定位 时 尽量 有 所 偏重 ,也 就 是 距离 中 心 坐 标 尽量 较 远 ,这 样 的 应 用 比较 
容 多 做 出 目 己 的 个 性 而 吸引 有 用户, 原因 就 是 前 文 问 大 家 前 述 的 应 用 要 尽量 精练 和 开放 ,突出 
目 己 独特 功能 的 同时 能 够 依 助 其 他 应 用 并 且 与 它们 和 谐 相 处 ,这 样 可 以 有 效 地 避免 应 用 变 
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得 爱 肿 一 一 “大 而 全 ”。 

同时 ,更 要 着 眼 行业 整体 的 发 展 趋势 ,设法 创作 或 挖掘 出 全 新 的 操作 界面 、 完 成 任务 或 
解决 问题 的 方法 ,不 断 地 把 这 个 行业 推 回 社会 发 展 的 前 党 。 所 以 , 越 多 的 设计 师 加 入 到 这 个 
行业 中 来 , 越 多 的 应 用 产品 充实 到 应 用 商店 里 ,这 个 行业 才能 够 变 得 越 丰 是, 受到 社会 和 人 
们 的 瞩目 和 关注 。 应 该 不 断 地 推出 新 的 移动 应 用 ,做 有 价值 的 应 用 的 同时 ,也 要 把 它 塑 造 得 
与 众 不 同 。 


3.2.2 做 与 众 不 同 的 应 用 


在 设计 和 开发 产品 的 时 候 , 我 们 会 提出 的 第 一 个 ,也 是 最 和 直上 日 、 最 关键 的 问题 : 用 户 为 
会 使 用 我 们 的 应 用 产品 ? 或 者 确切 一 点 : 成 千 上 万 个 应 用 摆 在 那里 ,他 们 和 攒 什么 会 用 、 
会 想到 使 用 我 们 的 产品 ? 
想 要 理 清 这 个 问题 ,得 从 两 个 层面 来 分 析 : 一 是 我 们 的 产品 是 不 是 和 用 户 的 需求 完美 
XE BE ,解决 其 他 任何 应 用 都 无 法 解决 的 问题 ,这 个 属于 功能 的 层面 ; 二 是 我 们 的 产品 能 够 触 
动人 心 ,满足 用 户 的 感性 需求 ,市 给 他 们 无 法 比拟 的 特殊 体验 ,那么 这 个 属于 体验 层面 。 简 
单 通俗 地 说 , 那 就 是 我 们 的 应 用 产品 是 前 无 十 人 还 是 出 类 拔 茶 。 

先 谈 谈 第 一 个 层面 ,也 就 是 “前 无 古人 ”。 

如 果 你 正 准 备 做 一 球 备 起 录 式 的 等 办 事项 的 应 用 或 者 是 钢 频 文件 播放 带 , 那 么 打开 网 
上 移动 应 用 商店 看 一 看 ,你 能 确保 你 的 应 用 能 够 与 在 商店 里 摆 春 的 无 数 同 类 产品 有 所 不 同 
mj? 当然 也 许 有 所 不 同 , 但 关键 是 你 的 “与 众 不 同 ” 真 的 是 广大 用 户 所 需要 的 吗 ? 你 真 的 与 众 
不 同 地 为 他 们 解决 了 什么 问题 吗 ? 如果 没 有 , 那 你 的 应 用 只 能 被 成 二 上 万 个 其 他 类 似 应 用 给 
淹没 ,除非 你 纯粹 是 为 了 好 玩 , 或 是 满足 自己 的 个 性 需求 ,那么 你 的 产品 最 多 是 一 个 展示 你 技 
术 的 演示 品 。 因 此 ,要 理性 地 分 析 市 场 \ 分 析 用 户 , 握 茎 那些 “鸡肋 ”的 想法 ,做 有 价值 的 应 用 。 

我 们 还 可 以 去 创造 一 些 不 同 于 大 众 的 优势 ,要 么 是 发 明了 一 个 全 新 的 工作 原理 或 是 交 
流 理 念 ,要 么 是 区 握 了 无 法 模仿 的 高 科技 技术 或 是 专利 成 末 ,当然 ,还 可 以 深 人 了 解 一 些 特 
定 的 人 群 , 为 他 们 量 映 打造 一 丈 贴 心 的 应 用 程序 …… , 息 人 还 会 有 我 们 没有 想到 的 很 多 思 
路 ,都 能 够 达到 我 们 的 应 用 "前 无 十 人 ”的 目标 。 但 是 与 此 同时 ,我 们 还 必须 考虑 一 下 ,我们 
要 通过 这 球 应 用 得 到 什么 ?是 为 了 展示 你 的 优势 ?还 是 发 泄 目 己 的 激情 ? 或 者 是 提高 你 公 
司 的 知名 度 ? 还 是 这 人 句 话 , 如 末 没 能 真正 地 迎合 用 户 的 心理 \ 满 足 用 户 的 实际 需要 ,仍然 会 
被 他 们 无 情 地 抛弃 。 所 以 ,深入 地 做 好 用 户 调 查 和 分 析 ,永远 是 第 一 位 的 。 有 时 候 我 们 必须 
放弃 自己 的 兴趣 和 一 些 一 所 情愿 的 想法 ,学 会 站 在 用 户 的 角度 看 , 反 过 来 间 问 自己 :“ 你 的 
应 用 到 瓜 能 给 我 市 来 什么 ? 它 到 的 能 给 我 解决 什么 问题 ?” 后 文 将 会 具体 地 和 大 家 探讨 如 何 
做 好 用 户 的 调查 和 分 析 。 

再 谈 谈 怎 么 做 出 一 个 “出 类 拔 某 ”的 应 用 。 

我 们 挖空心思 想 出 来 了 似乎 “前 无 古人 ”的 好 主意 ,在 移动 应 用 商店 里 却 发 现 已 经 被 别人 
实现 或 者 已 经 实现 了 大 部 分 ,这 样 的 事 司空 见 惯 。 先 不 用 看 急 打 退 堂 或 ,因为 无 论 如 何 我 们 的 
应 用 和 他 们 的 不 一 样 ,虽然 想法 相同 或 相似 ,但 我 们 完全 可 以 把 它 做 得 与 众 不 同 、 独 树 一 帜 。 
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3.2.3 如何 才 能 独树一帜 


车 名 交互 与 应 用 设计 师 Josh Clark 在 他 的 一 本 著作 里 说 了 这 样 一 句 话 :“ 我 们 有 时 候 
可 以 像 思考 人 类 一 样 去 思考 应 用 ”。 作 为 人 类 ,我 们 都 长 了 同样 的 四 胶 和 五 家 ,同样 的 用 请 
言 交 流 、 用 双 腿 行走 ,同样 的 具备 七 情 六 和 欲 ,会 喜 友 朝 乐 。 但 是 我 们 很 少 或 者 从 来 不 会 互相 
之 间 识 别 错 ,因为 我 们 每 个 人 部 有 一 个 很 明确 的 区 别 于 他 人 的 特征 。 是 什么 让 我 们 彼此 区 
4]? 首 移 当然 是 长 相 了 。 在 茫 花 人 海中 ,长 相好 的 人 往往 有 吸引 力 ,容易 脱 阁 而 出 而 被 大 家 
注意 。 但 是 也 有 很 多 长 相 平 平 的 人 同样 受到 大 家 的 欢迎 , 锌 大 众 所 关 注 ,又 是 什么 让 他 与 众 
不 同 ,独树一帜 ? 是 个 性 ,与 众 不 同 的 个 性 。 人 的 个 性 可 以 有 很 多 的 层面 ,长 相 也 可 以 算是 
其 中 之 一 ,更 重要 的 是 性 格 ,例如 交流 方式 `. 处 事 方法 、. 胶 体 动作 、 行 为 特点 等 ,这 些 都 可 以 成 
为 人 们 区 别 于 他 人 而 独树一帜 的 个 性 ,而 好 的 性 格 确实 能 够 很 容易 地 打动 别人 ,被 别 人 接受 
和 豆 欢 。 而 人 的 个 性 最 重要 的 层面 ,我 认为 是 人 的 格调 和 境界 ,这 是 在 我 们 漫长 的 人 生 阅 历 
中 积案 出 来 的 精华 ,是 他 人 望 侍 更 及 而 又 无 法 模仿 和 超越 的 。 

思考 完 人 类 ,我 们 来 体会 移动 应 用 设计 ,Josh Clark 的 这 句 话 真 的 给 了 我 很 大 的 启发 。 
要 想 在 成 干 上 万 的 移动 应 用 中 独树一帜 ,我 们 必须 理性 分 析 , 冷 静 判 断 。 首 先 , 我 们 要 和 其 
他 同类 应 用 的 “长 相 ” 有 所 区 别 ,包括 形式 上 的 区 别 : 我 们 设计 的 色调 有 没有 和 他 们 “ 撞 衫 ”? 
我 们 的 名 称 是 不 是 和 他 们 雷同 或 者 容易 混 消 ? 我 们 的 控件 位 置 和 导航 模式 是 不 是 和 他 们 相 
网 在 和 他 们 一 一 区 分 的 同时 ,我 们 还 要 比 他 们 ”长 得 好 看 “有 吸引 力 , 发 挥 你 过 人 的 
设计 本 领 ,勾画 出 更 加 精美 的 造型 .搭配 出 更 加 可 人 的 色彩 、 制 作出 更 有 人 视觉 的 效果 …… 不 
过 ,仅仅 到 这 一 步 还 是 不 够 。 

我 们 要 在 “个 性 ”上 达到 真正 的 独树一帜 。 无 论 是 视觉 上 还 是 应 用 体验 上 ,有 了 “个 性 ” 
才能 真正 的 与 众 不 同 , 独 树 一 帜 。 当 然 ,创造 个 性 也 得 以 用 户 为 中 心 , 比 如 ,我 们 可 以 创造 出 
一 套 独 特 的 奖励 机 制 , 增 加 用 户 的 成 就 感 ; 还 可 以 针对 特定 的 人 群 ,提炼 出 他 们 的 共性 ,把 
它 打 造成 目 己 的 个 性 ; 还 可 以 抓 住 用 户 的 好 奇 心 ,虚构 出 一 些 事件 但 没有 结果 ,再 定期 发 布 
事情 的 进展 ,或 者 虚构 一 个 人 物 ,定期 透露 他 的 绯闻 等 。 然 而 ,最 实际 的 , 莫 过 于 能 够 创造 出 
比 别人 更 简单 有 效 的 解决 问题 的 方法 ,或 者 能 解决 同样 的 问题 却 更 便宜 其 至 不 伦 钱 。 

下 面 比较 几 球 第 用 的 移动 交流 应 用 。 当 然 , 最 传统 的 移动 交流 方式 肯定 是 短信 了 ,iOS 
上 的 短信 应 用 采用 的 是 实时 对 话 的 方式 ,界面 侧 单 大 气 ( 见 图 3-9(a))。 采 用 对 话 泡 泡 的 隐 
喻 不 但 把 来 言 和 去 语 分 得 清 清 楚楚 ,还 增强 了 对 话 的 体验 感 。 不 过 ,作为 对 话 和 信息 传输 炬 
道 , 短 信 这 种 方式 已 经 尿 渐 地 被 其 他 应 用 或 方式 所 代 酝 ,“ 微 信 ”( 见 图 3-9(b)) 成 为 时 下 移 
动用 户 最 受热 氛 的 移动 聊天 交友 工具 绝 不 是 偶然 的 , 衣 和 匈 是 用 网 络 流量 的 传输 方式 取代 了 
短信 传输 ,为 用 户 节 省 了 不 小 的 开销 。 同 时 ,“ 按 住 说 话 ” 功 能 不 但 成 就 了 不 爱 打 字 的 懒 人 
们 ,还 极 大 地 增强 了 实时 对 话 的 体验 感 , 好 像 在 用 对 讲 机 一 样 。 不 但 提高 了 交流 的 速度 ,也 
绥 解 了 触 屏 手机 打字 不 方便 的 缺点 。 然 而 ,“ 微 信 ” 最 具 个 性 的 还 得 算是 “附近 的 人 ”和 “ 摇 一 
摇 ”" 功 能, 用户 可 以 通过 这 些 功 能 了 解 和 认识 附近 同样 使 用 " 微 信 ”的 用 户 , 增 加 了 交流 和 交 
友 的 随机 性 和 多 元 化 。 
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而 Google 公司 在 2011 年 推出 的 交流 平台 Google 十 ”( 见 图 3-9(c) ) 更 是 把 这 种 多 元 化 
做 到 了 极致 。 在 移动 平台 上 ，Google 十 ?除了 聊天 、 交 友 查看 更 新 和 观赏 视频 等 基本 功能 
之 外 ,还 具备 名 叫 Huddle 的 群 组 聊天 功能 。 和 Facebook 和 Twitter 的 应 用 不 同 ,Google 十 
的 移动 应 用 允许 用 户 同时 和 多 位 朋友 聊天 ,大 家 可 以 一 起 制定 计划 或 消磨 时 间 。 











(a) iDOS 的 “短信 ” (b) “RUR” (c) “Google+” 
图 3-9 iOS 平台 上 的 “短信 ”、“ 微 信 ” 和 “Google 十 ” 


同样 是 移动 交流 方式 ,或 者 简单 地 说 ,同样 是 聊天”, 以 上 的 几 个 应 用 都 通过 日 己 独 具 
一 格 的 方式 ,让 用 户 感 受到 了 不 同 的 个 性 体验 。 可 见 , 只 要 我 们 发 挥 目 己 无 穷 的 想象 力 , 完 
全 可 以 在 同类 的 应 用 中 脱颖而出 。 因 此 ,我们 应 该 把 精力 更 多 地 放 在 设计 更 加 科学 的 界面 
布局 \ 挖 据 更 多 的 体验 层面 、 创 造 更 具 发 展 潜力 的 体验 模式 上 面 。 打 造 好 目 己 的 “容貌 ”、 逆 
造 好 目 己 的 “个 性 ”, 设 计 出 与 众 不 同 、 独 树 一 帜 的 完美 应 用 。 

同时 ,也 要 知道 ,并 不 是 有 个 性 就 一 定 会 受 欢 迎 , 比 如 有 些 人 为 了 追求 个 性 而 远离 了 大 
众 ,更 有 些 人 甚至 把 偏执 和 丑陋 当成 了 个 性 。 移 动 应 用 中 也 不 乏 这 样 的 糟粕 作品 ,一味 妃 来 
视 沉 特效 或 者 弄 出 些 哗 众 取 宠 的 低俗 内 容 。 因 此 ,在 设计 移动 应 用 过 程 中 要 好 好 把 握 目 己 的 
优 展 个 性 。 怎 么 把 握 ” 有 参照 或 标准 吗 ? 当然 有 , 那 就 是 用 户 的 感受 ,还 是 同样 的 道理 ,成 败 
与 否 的 关键 残 在 于 对 用 户 的 分 析 与 了 解 。 接 下 来 ,我 们 就 要 谈 谈 应 该 如 何 去 分 析 和 了 解 用 户 。 


3.3 为 用 户 而 设计 


应 用 设计 的 初学 者 很 容易 沙 人 一 个 陷阱 , 那 就 是 为 目 己 虚构 的 一 个 理想 化 的 用 户 而 设 
计 。 所 谓 理想 化 的 用 户 是 你 想象 出 来 的 用 户 ,而 不 是 真实 社会 中 的 用 户 。 你 可 能 党 察 不 到 ， 
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这 个 理想 化 的 用 户 其 实 就 是 你 目 己 ,你 是 在 为 目 己 设计 。 

我 们 一 定 要 打破 这 个 陷阱 , 抛 开 目 我 的 价值 取向 和 主观 意识 ,为 他 人 而 设计 。 我 们 设计 
和 开发 应 用 的 最 终 目 的 ,就 是 要 让 其 他 人 豆 欢 和 使 用 我 们 创造 出 来 的 产品 , 绝 不 是 为 了 满足 
目 我 价值 和 虚 采 心 。 所 以 我 们 必须 要 去 了 解 我 们 的 有 用户, 了解 他 们 的 特点 ,了 解 他 们 的 需 
求 , 从 他 们 的 视角 审视 我 们 的 设计 。 


3.3.1 了 解 应 用 的 使 用 者 


随 三 夺 四 、 豆 新 大 旧 、 缺 乏 耐 心 ,这 就 是 我 们 面 对 的 用 户 群 。 

了 了解 用 户 也 是 一 个 复杂 的 过 程 ,因为 每 个 人 部 有 目 己 的 个 性 需求 和 功能 取向 ,而 且 用 户 
群体 之 间 存 在 看 很 大 的 差异 性 ,有 时 我 有 意 地 针对 并 迎合 了 一 个 用 户 群 , 却 不 知 不 觉 中 "得 
徘 " 了 另 一 个 用 户 群 。 因 此 ,即使 针对 一 个 特定 的 群体 或 企业 设计 应 用 ,也 仍然 需要 大 范围 
的 了 解 、 考 察 用 户 的 需要 , 尺 可 能 地 化 解 或 避免 不 同 用 户 群 体 之 间 的 差异 。 当 然 ,如 采 设 计 
是 针对 一 个 比较 庞大 的 用 户 和 群体 甚至 是 整个 移动 用 户 , 那 么 我 们 需要 做 的 调查 .考虑 的 问 
题 . 面 对 的 各 种 可 能 性 就 会 成 倍 地 增加 。 

这 听 起 来 似乎 有 些 环 手 ,那么 我 们 应 该 怎样 入 手 去 做 这 件 事情 呢 ? dA BE HE SI E E 
去 一 个 一 个 地 询问 吧 ? 因此 ,必须 通过 一 些 有 效 的 方法 和 途径 了 解 他 们 的 真实 需求 观察 他 
们 的 习性 ,找到 他 们 的 差异 。 


3.3.2 用 户 细 分 


我 们 要 做 的 第 一 步 , 就 是 把 大 量 的 用 户 进行 分 类 ,划分 成 较 小 的 群 组 ,每 一 群 组 都 是 由 
具有 相同 特征 的 用 户 组 成 ,有 多 少 种 用 户 类 型 ,就 可 有 多 少 种 方式 来 划分 用 户 ,我 们 把 这 一 
步骤 称 为 “用户 细 分 ”。 这 样 ,我 们 就 可 以 把 大 量 的 用 户 需 求 划 分 成 几 个 可 以 管理 的 部 分 ,下 
面 是 儿 种 常见 的 细 分 方法 。 

1. 人 口 统计 分 类 

人 口 统计 分 类 就 像 营 销 人 员 针 对 销售 对 和 象 分 类 的 方法 。 划 分 的 依据 一 般 包 括 性 别 \ 年 
龄 .教育 水 平 、. 婚 姻 状 况 和 收入 等 。 划 分 的 范围 可 以 很 粗略 ,比如 年 龄 段 可 以 分 成 儿童 、 青 
年 .中 年 和 老年 ,也 可 以 非常 具体 .细致 ,比如 把 青年 人 分 成 18 一 24 岁 . 25 一 30 岁 、 31 一 36 多 
三 个 阶段 。 这 样 的 划分 可 以 很 容易 地 把 需求 区 分 并 提炼 出 来 ,只 是 结果 比较 宽广 ,对 于 一 些 
针对 性 比较 强 的 应 用 会 显得 有 些 粗 略 。 

2. 消费 心理 分 类 

消费 心理 分 类 就 是 划分 对 这 个 世界 拥有 共同 观点 和 看 法 的 人 群 。 这 个 方法 听 起 来 似乎 
有 些 抽象 ,因为 它 涉及 心理 分 析 。 我 们 需要 划分 的 ,是 对 与 你 的 应 用 相关 的 某 个 事物 观点 和 
看 法 不 同 的 人 群 ,并 以 此 为 根据 提 炬 出 不 同 种 类 的 用 户 需 求 。 然 而 ,心里 特征 与 人 口 统计 特 
征 也 上 县 县 相关 ,比如 ,同一 年 龄 段 、 同 一 收入 水 平 或 同一 地 域 的 人 们 往往 会 有 相同 或 者 比较 
相似 的 观点 。 但 是 涉及 世界 观 和 兴趣 点 方面 的 应 用 ,统计 法 就 没有 指导 意义 了 。 

3. 技术 需求 分 类 

技术 需求 分 类 也 就 是 划分 对 移动 设备 使 用 技术 程度 不 同 的 人 群 。 对 移动 设备 的 操作 水 






































5 


60 


| 交互 设计 的 艺术 一 一 iOS 7 拟 物化 到 扁平 化 革命 


平 ,不 同年 龄 段 和 教育 水 平 的 人 和 群 是 不 同 的 。 而 且 我 们 有 时 也 会 去 开发 一 些 技 术 型 的 产品 ， 
这 对 于 了 解 人 们 是 否 经 常 使 用 移动 设备 .是 否 经 常 上 网 或 经 常 与 技术 型 产品 打交道 是 非常 有 
用 的 。 有 些 用 户 需 要 最 新 和 最 时 尚 的 功能 ,关注 应 用 的 更 新 ,而 有 些 用 户 会 在 大 量 的 功能 面前 
感到 恐惧 ,对 操作 设置 无 从 下 手 , 我 们 设计 应 用 时 必须 考虑 能 否 容纳 这 些 不 同类 型 的 用 户 群 。 

4. 社会 角色 分 类 

人 们 对 应 用 产品 的 需求 有 时 取决 于 他 们 的 社会 或 专业 角色 。 例 如 , 面 对 考 试 ,教师 和 学 
生 对 于 信息 的 需求 就 截然 不 同 , 面 对 计 算 机 ,使 用 者 和 开发 者 对 人 硬件 的 需求 也 不 尽 相 同 。 
此 ,定义 好 使 用 者 的 不 同 角 色 可 以 帮助 我 们 有 效 地 区 分 并 分 析 他 们 的 各 种 需求 。 

以 上 只 是 众多 的 用 户 细 分 方法 ( 见 图 3-10) 中 比较 实用 和 常见 的 方法 ,在 对 用 户 进 行 分 
类 之 后 ,我们 还 需要 对 分 类 后 的 每 一 类 人 和 群 进 行 研究 和 分 析 , 了解 他 们 的 特点 ,观察 他 们 的 
行为 ,找到 不 同类 别 用 户 之 间 的 共同 点 ,设法 化 解 不 同类 别 用 户 之 间 的 刻 盾 。 那 么 接 下 来 ， 
我 们 挑选 出 我 们 的 应 用 所 针对 的 一 类 或 几 类 用 户 进行 分 析 和 研究 ,看 看 他 们 到 底 需 要 什么 ? 


i; “ge 


(a) 现实 社会 中 的 用 户 群 (b) 设计 人 员 眼 中 的 用 户 群 
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图 3-10 ”用户 细 分 


3.3.3 ”用户 研究 


所 谓 用 户 人 研究 就 是 通过 收集 必要 的 信息 ,来 了 解 用 户 的 心理 、 观 点 和 共识 。 一 些 当 用 的 
方法 ,比如 问卷 调查 .用户 访谈 以 及 焦点 小 组 等 都 非常 适合 收集 这 些 信息 。 

1. 问卷 调查 

一 般 来 次 ,在 茶 一 个 用 户 身 上 花费 的 时 间 越 多 ,就 能 从 这 次 用 户 研 究 中 得 到 的 信息 越 详 
细 。 不 过 这 也 造成 了 你 不 可 能 接触 太 多 的 用 户 , 因 此 ,采用 问卷 调查 的 方法 是 一 个 比较 科 
学 、 局 效 的 获取 用 户 基 本 信息 的 方法 。 但 是 这 问卷 的 内 容 需 要 我 们 精心 的 设计 ,只 有 你 目 己 
明确 想 从 用 户 量 上 获得 什么 样 的 信息 时 ,我 们 的 问卷 调查 才 会 产生 效果 , 才 会 给 你 市 来 宝贵 
的 信息 。 因 此 ,你 需要 把 你 想 要 得 到 的 信息 尽 可 能 清楚 、 具 体 、 公 式 化 地 表达 在 你 的 问卷 上 ， 
这 样 才 能 确保 你 获得 正确 的 答案 。 

图 3-11 展示 的 是 51work6 团队 在 为 “艺术 品 收藏 * 应 用 进行 用 户 需 求 分 析 时 ,针对 艺术 
爱好 者 和 对 艺术 资讯 感 兴趣 的 人 群 制 作 了 这 个 调查 问卷 ,主要 日 的 是 想 通 过 问卷 了 解 用 户 
群体 的 群 类 特点 ,相关 兴趣 点 以 及 选择 合适 的 移动 平台 和 附加 功能 。 为 了 信息 收集 尽 可 能 
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O 51work6.com 


乙 术 品 收藏 ”应 用 用 户 需 求 调 但 问 郑 


我 们 非常 需要 您 的 意见 与 建议 . 使 我 们 可 以 更 好 地 为 您 服务 ,为 了 能 使 我 们 更 准确 地 理解 您 的 意见 和 建议 . 更 好 地 完善 我 
们 的 应 用 产品 ， 真 诚 地 希望 您 能 给 我 们 准确 .认真 .如 实 .完整 的 信息 反馈 . 非常 感谢 您 填写 我 的 问卷 | 








图 3-11 “艺术 品 收藏 ”项 目 用 户 需 求 调查 问卷 


62 


| 交互 设计 的 艺术 一 一 iOS 7 拟 物化 到 扁平 化 革命 


全 面 ,我 们 把 问卷 设计 得 比较 详细 ,但 有 考虑 到 受 访 者 的 耐心 程度 ,所 以 还 是 进行 了 相当 大 
的 取舍 。 问 卷 设计 了 两 个 版 本 ,分 别 是 网 页 的 和 纸 质 的 ,这 里 展示 的 是 纸 质 版 的 问卷 。 

2. 现场 调查 

现场 调查 与 问卷 调查 的 区 别 在 于 , 它 是 直接 地 去 观察 和 了 解 用 户 在 日 常生 活 中 的 情景 
和 具体 行为 ,而 不 是 由 他 们 自己 来 描述 。 它 的 优势 是 直观 .全面 而 且 细致 ,唯一 的 缺点 就 是 
它 有 时 候 会 非常 的 费时 而 且 昂贵 。 只 要 你 有 充足 的 时 间 ,足够 的 人 力 和 充足 的 资金 ,现场 调 
查 会 使 你 对 用 户 群 有 更 加 深刻 的 理解 ,全 面 细致 的 现场 调查 甚至 可 以 解释 一 些 无 法 通过 其 
他 方法 获知 的 用 户 行为 。 

现场 调查 的 过 程 也 比较 多 样 , 在 一 些 情况 下 ,可 以 使 用 一 种 轻 量 级 、 低 成 本 的 方法 来 实 
施 。 比 如 针对 艺术 品 收藏 方面 的 应 用 ,我 们 可 以 在 美术 馆 或 博物 馆 观 察 每 一 个 专题 展览 的 
人 数 、 每 个 人 在 展览 中 逗留 的 时 间 长 短 以 及 是 否 会 在 看 完 作品 后 主动 购买 相关 画册 或 明 信 
片 等 产品 。 不 过 ,我 们 要 在 现场 调查 之 前 进行 充分 、 合 理 的 任务 分 析 , 看 看 它们 是 否 可 以 为 
你 的 应 用 设计 带 来 有 价值 的 信息 或 灵感 ,或 者 能 够 对 你 已 经 成 型 的 想法 或 思路 进行 验证 , 千 
万 别 把 时 间 和 精力 放 在 一 些 琐碎 的 或 毫 无 意义 的 调查 上 。 

3.3.4 用 户 测 试 

这 种 用 户 调 查 方式 主要 是 发 生 在 项 目 进 展 过 程 中 间 ,而 不 是 在 项 目 开 始 之 前 。 我 们 在 
进行 应 用 设计 的 草图 绘制 .原型 设计 或 者 个 性 化 调整 等 阶段 时 ,都 可 以 把 项 目 进展 的 结果 输 
入 到 移动 设备 上 , 拿 给 用 户 去 体验 ,让 他 们 在 设备 上 尝试 着 使 用 一 下 ,我 们 在 一 旁观 察 、 记 
录 , 认 真 地 听取 他 们 的 意见 和 建议 ,我 们 通常 把 这 种 形式 称 为 项 目 进展 过 程 中 的 “可 用 性 测 
试 ”, 这 个 测试 的 内 容 可 以 是 非常 具体 的 高 保 真 原型 ,也 可 以 是 一 个 粗 烟 的 原型 草图 。 而 测 
试 的 结果 ,可 以 帮助 我 们 非常 具体 地 找到 应 用 的 缺点 和 不 合理 的 环节 ,有 利于 我 们 进一步 完 
善 产品 的 各 方面 的 功能 需求 和 操作 简易 度 。 在 后 面 的 章节 里 ,我 们 还 会 针对 每 个 环节 的 设 
计 , 具 体 讲解 可 用 性 测试 的 方法 和 目的 。 

关于 用 户 需求 分 析 和 研究 的 方法 ,还 有 很 多 种 ,比如 对 相似 产品 的 用 户 进行 对 比 、 创 建 
一 个 典型 性 的 用 户 人 物 角色 等 等 。 最终 的 目的 就 是 要 了 解 这 些 应 用 的 使 用 者 到 底 需 要 什 
么 ,在 这 些 需 求 里 我 们 应 该 优先 考虑 哪 一 点 ,真正 地 站 在 他 们 的 角度 上 、 心 理 上 和 生活 方式 
上 寻求 我 们 应 用 的 功能 点 和 操作 方式 。 只 有 把 这 些 信 息 收集 全 面 ,我 们 才 可 以 进入 到 用 户 
体验 设计 的 下 一 步 流程 : 应 用 的 创意 和 构思 阶段 ， 
































当 一 个 项 目 真 真切 切 地 摆 在 面前 的 时 候 , 再 有 经 验 的 设计 师 也 会 有 些 无 从 下 手 ,毕竟 创 
意 或 灵感 这 类 东西 不 是 说 来 就 能 来 的 。 而 且 , 越 是 有 经 验 的 设计 师 就 越 能 体会 到 一 点 , 那 就 
是 你 越 是 绞 尽 脑 汗 地 和 钻 牛 角 尖 ,灵感 和 创意 束 好 像 离 你 越 来 越 还 。 它 们 的 出 现 , 往 往 是 在 不 
经 意 间 的 ,有 时 候 在 浏览 杂志 或 报纸 的 时 候 , 有 时 候 是 听 到 了 别人 的 一 句 话 , 甚 至 有 时 候 会 
从 睡梦 中 产生 。 

我 们 通常 会 这 样 认 为 : 灵感 ,就 是 我 们 在 一 生 中 知识 不 断 的 积累 ,人 生 阅 历 不 断 的 增 
加 ,在 动脑 子 的 时 候 , 就 会 灵光 一 现 地 闪现 在 你 的 大 脑 里 ,源源 不 断 地 产生 。 真 的 是 这 么 简 
单 吗 ?有 没有 一 些 方法 能 够 有 效 地 把 它 激发 出 来 ” 依 助 团队 的 力量 能 否 使 创意 和 灵感 的 产 
生变 得 更 加 迅速 .更 加 丰 定 、 现 加 开阔 ? 在 本 章 里 ,我 们 会 为 大 家 在 项 目 创意 阶段 提供 一 些 
帮助 , 谈 谈 如 何 打 开 思 路 ,激发 灵感 , 抓 住 有 价值 的 线索 , 细 化 你 的 创意 内 容 , 最 终 完 成 用 户 
体验 设计 的 第 一 个 阶段 : 原型 草图 设计 。 





4.1 得 到 完美 的 创意 


对 应 用 的 交互 方式 .界面 设计 以 及 操作 流程 进行 创意 ,是 原型 设计 低 保 真 阶段 最 重要 的 
环节 。 很 多 时 候 ,这 个 过 程 我 们 都 是 坐 在 计算 机 前 面 竖 思 昔 想 , 有 时 拿 一 个 速写 本 勾 勾 夯 
画 , 或 是 在 观摩 大 量 的 资料 中 度 过 的 ,结果 却 总 是 收效 甚 征 。 我 们 觉得 最 有 效 、 最 直接 的 方 
法 还 是 玩 一 次 “头脑 风暴 ”。 

4.1.1 bibe" 3k Jii ae E 

当 我 说 出 这 个 词汇 的 时 候 ,很 多 读者 恐怕 会 望 文 生 义 地 认为 ,头脑 风暴 ?就 是 充分 地 展 
开 自 己 的 想象 力 ,让 你 的 头脑 像 风 暴 一 样 发 挥 联想 ,或 者 是 让 你 的 头脑 经 受 风暴 一 样 的 证 
击 。 其 实 这 是 曲解 了 它 的 含义 ,毕竟 它 是 一 个 外 来 词汇 ,英文 拼写 为 brainstorming。 那 我 
们 来 看 看 在 (牛津 高 阶 英汉 双 解 词典 ) 中 对 它 的 解释 :“A way of making a group of people 


all think about sth at the same time, often in order to solve a problem or to create good 
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东 件 事 的 方式 ”, 这 有 点 像 我 们 通常 说 的 “集思广益 ”的 意思 。 所 以 从 原意 上 来 看 , 它 根 本 就 
不 是 一 个 人 能 完成 的 事情 ,而 是 要 集中 一 群 人 来 做 的 游戏 。 

第 一 次 接触 或 者 说 是 了 解 这 个 游戏 ,是 从 我 的 一 个 大 学 同学 那里 ,当时 我 正在 给 北 束 西 
城 经 济 科 技 大 学 的 广告 专业 上 ”创意 理论 课 ”。 这 门 课 确实 让 我 很 犯难 ,我 当时 的 办 法 ,就 是 
给 学 生 观 摩 大 量 的 优秀 .精彩 的 创意 ,分 析 它 们 的 思路 ,寻找 它们 的 灵感 来 源 ,总 结 它 们 的 成 
功 要 点 ,结果 收效 其 微 ,虽然 这 些 优秀 的 创意 能 够 深刻 地 感染 这 些 学 生 , 但 当 他 们 面 对 一 个 
全 新 的 主题 开始 思考 的 时 候 , 依 然 非 第 吃力 。 毕 竞 好 的 创意 是 无 法 参照 \ 无 法 模仿 、 更 无 法 
测 忽 的 ,它们 往往 是 为 某 一 件 商品 或 一 个 事物 量 员 定做 的 , 放 在 别 的 事物 上 束 会 立刻 失效 。 
而 一 个 创意 产生 育 后 的 思维 过 程 和 灵感 参照 是 从 创意 表面 无 法 笑 测 的 。 

于 是 ,我 找到 我 的 这 个 大 学 同学 ,原因 是 他 刚刚 从 英国 的 位 明 对 大 学 毕业 回国 , 拿 到 了 
这 所 大 学 里 含金量 很 高 的 “艺术 与 设计 学 院 ” 的 硕士 学 位 。 我 认为 这 样 的 项 尖 大 学 ,他 们 的 
创意 诛 程 应 该 会 有 一 些 比较 新 鲜 的 方法 或 者 是 高 超 的 手段 来 提高 学 生 的 创意 能 力 。 结 末 他 的 
回答 让 我 很 吃惊:“ 我 们 的 创意 诛 可 没有 什么 花样 ,只 干 一 件 事 , 屿 是 不 停 地 玩 "头脑 风 骏 ”。 

“头脑 风 骏 ” 真 的 那么 神奇 有 效 吗 ? 为 了 验证 一 下 ,我 请 了 我 的 这 位 同学 来 到 我 的 班 
上 ,客串 了 一 下 讲师 ,仿照 们 明 吏 大 学 的 诛 符 要 求 ,随便 找 了 一 个 主题 ,市 看 这 些 学 生 玩 了 两 诛 
时 的 ”头脑 风暴 ”。 结 采 出 乎 意料 ,几乎 所 有 的 学 生 在 接 下 来 的 一 个 小 时 里 ,都 拿 出 了 一 个 甚至 
好 儿 个 很 有 意思 的 创意 草图 ,而 且 都 意犹未尽 , 比 起 我 之 前 上 诛 时 的 诛 等 气质 真是 天 坏 之 别 。 

说 了 半天 ,既然 “头脑 风 友 ”是 一 个 游戏 , 那 它 到 的 是 怎么 个 玩法 呢 ? 人 简单 地 说 ,就 像 前 
面 提 到 的 ,集中 一 群 人 ,同时 对 一 个 事物 或 一 个 主题 受 无 约束 地 发 表 上 日 己 的 观点 。 由 于 没有 
约束 、 没 有 限制 ,大 家 就 可 以 非 第 自由 地 思考 ,展开 日 己 的 联想 ,大 声 把 它 说 出 来 但 不 允许 批 
评 , 而 说 出 来 的 结果 有 可 能 激发 出 了 别人 更 多 的 观点 和 联想 ,继续 大 声 说 出 来 ,不 断 地 激发 ， 
不 断 地 联想 ,不 断 地 大 声 说 出 来 ,把 所 有 的 观点 记录 下 来 ,最 后 对 这 些 观 点 进行 评估 ,提炼 出 
有 价值 的 观点 或 想法 。 所 以 ,我 们 看 到 ， 头 脑 风 暴 ”的 特点 就 是 让 人 们 敞开 思想 ,不 同 的 设 
想 在 相互 碰撞 中 激 起 脑海 中 的 创造 性 风 码 。 

以 上 提 到 的 是 “头脑 风暴 的 第 一 种 玩法 ,通常 称 作 “ 创 造 性 风 芭 ”, 它 也 可 以 作为 游戏 的 
第 一 个 环 市 ,也 就 是 说 我 们 的 游戏 可 以 继续 玩 下 去 。 在 “创造 性 风 其 ”中 我 们 可 能 得 到 很 多 
的 思路 和 想法 , 哪 一 个 是 最 好 的 ,或 是 最 可 行 的 呢 ? 这 往往 很 难 取 舍 , 此 时 可 以 对 这 些 观 操 
或 者 方 宁 逐 一 提出 质疑 ,所 有 的 人 开始 质疑 之 前 得 到 的 观点 或 思路 ,思考 它们 的 缺点 和 疼 
疾 , 大 声 说 出 来 ,不 断 地 记录 下 来 。 真 金 不 伯 火 炼 , 最 成 功 的 观点 或 是 最 可 行 的 方案 最 终 会 
脱颖而出 ,这 就 是 "头脑 风 有 又 "的 第 二 种 玩法 或 者 说 是 第 二 个 阶段 ,我 们 称 为 "质疑 性 风 参 ”。 
当然 ,有 些 时 候 我 们 可 能 不 需要 第 二 个 阶段 ,问题 就 已 经 解决 了 ,但 对 于 有 些 思路 或 是 方案 ， 
“质疑 性 风 骏 ”会 更 加 重要 , 它 可 以 把 一 些 不 够 成 束 的 想法 变 得 完善 ,把 方案 中 的 独 洞 补 齐 、 
增强 实现 它 的 可 行 性 。 

既然 “头脑 风暴 "这么 好 玩 又 这 么 有 益 RTS EJT 8 BC Y 先 别 急 ,成 功 地 完成 一 次 
“头脑 风 雄 ”游戏 并 不 是 一 件 容 易 的 事 , 痢 先 我 们 要 清楚 这 是 一 个 多 人 游戏 ,那么 说 明 它 同时 
也 是 一 次 会 议 , 这 里 是 否 存在 会 谈 机 制 和 团队 意识 的 因素 在 里 面 ” 既然 是 游戏 ,是 否 应 该 有 
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一 整套 的 游戏 规则 ? 想 成 功 地 得 到 游戏 结 末 ,是否 还 需要 一 些 经 验 的 文 持 ”所 以 接 下 来 ,让 
我 来 一 一 告诉 大 家 ”头脑 风 骏 DER AI E A o 规则 和 经 验 。 

“头脑 风 双 ”的 会 议 流 程 如 下 : 

C1) 确定 明确 的 方向 或 议题 ; 

(2) 选择 不 同 育 景 的 人 员 5 一 15 A; 

D 要 求 参 会 者 大 声 说 出 想法 而 不 许 批评 ; 

(4) 主持 人 不 能 限制 思维 的 方向 、 类 型 和 数量 ; 

(5) 由 记录 员 记 录 下 所 有 的 想法 ; 

(6) 讨论 . 评 佑 结 末 , 辞 选 出 最 佳 创意 (如 果 难 以 取舍, 可 继续 进行 “质疑 性 风 和 又 ”) 。 


4.1.2 是 娱乐 不 是 工作 


“头脑 风 骏 "是 一 个 "游戏 ” ,我们 要 把 它 当 作 娱 乐 项 目 而 不 是 工作 内 容 来 完成 ,这 是 一 个 
很 重要 的 观念 。 我 们 做 “头脑 风暴 ”的 目的 是 激发 灵感 .收集 创意 而 不 是 完成 什么 事务 性 的 
工作 。 我 们 发 现 很 多 情况 下 我 们 在 进行 “头脑 风暴 ”创意 的 时 候 效 采 不 是 很 好 ,其 实 原因 很 
简单 ,我们 往往 是 在 上 班 时 间 来 完成 ,由 设计 总 监 或 者 产品 经 理 来 组 织 ,在 会 议 室 进行 。 在 
XX FÉ B ACHSE HR. ,我们 思考 或 处 理 通 稼 会 非 笛 的 严谨 .认真 .严肃 ,甚至 会 把 目 己 阐述 的 观点 的 
过 程 当 作 领 导 的 考验 。 这 种 状态 与 “头脑 风 有 又” 所 需要 的 状态 是 完全 背道而驰 的 。 如 于 我 们 
下 班 以 后 ,在 咖啡 馆 里 ,在 聚会 上 把 它 当 作 娱 乐 项 目 , 甚 至 融 有 恶搞 或 调侃 性 质 的 洲 戏 ,得 到 
的 结 采 会 比 预期 好 上 很 多 。 因 此 ,我 们 必须 注意 在 进行 “头脑 风 骏 ?创意 的 时 候 彰 造 适合 的 
气 氟 ,不 要 市 有 很 强 的 工作 意味 和 目的 性 ,更 不 凸显 出 等 级 观念 和 市 有 考验 性 质 的 提问 ,要 
人 人 平等 。 想 象 力 是 徘 激 发 和 碰撞 产生 的 ,而 不 会 在 紧张 和 压抑 中 产生 。 


4.1.3 有 了 明确 的 目标 


上 面 我 们 提 到 ,成 功 地 组 织 一 次 “头脑 风 又 ”会议 是 很 不 容易 的 , 它 需 要 做 好 充足 的 准 
备 , 有 合理 的 分 工 ` 明 确 的 议程 有 效 的 前 期 铺垫 和 脑力 激发 ,完成 "风暴 "后 还 需要 进行 合理 
的 评估 和 、 细 化 甚至 再 创意 。 然 而 这 一 切 必须 建立 在 确定 一 个 明确 目标 的 基础 上 。 下 面 我 们 
就 从 如 何 合 理 地 确定 日 标 开始 谈 起 。 

由 于 “头脑 风暴 ”有 一 定 的 特殊 性 (后 文 会 详细 探讨 ) ,就 是 不 能 受 任 何 条 条 框框 的 影 啊 ， 
焉 励 不 看 边际 ,天 马 行 空 , 所 以 似乎 确定 了 明确 的 主题 也 没什么 用 ,因为 一 旦 “ 风 雄 ”开始 ,就 很 
难 按照 一 个 特定 的 日 标 发 展 下 去 ,大 家 实际 上 是 想到 了 什么 就 说 出 什么 ,而 且 也 不 许 批评 。 

事实 并 非 如 此 ,实际 上 在 这 种 情况 下 有 一 个 明确 而 详尽 的 目标 是 非常 重要 的 。 首 移 , 这 
个 日 标 是 一 个 心理 暗示 ,使 所 有 的 参 会 者 在 思考 之 前 都 有 了 一 个 共同 的 出 发 点; 同时 ,明确 
的 目标 也 是 "头脑 风 姑 "开始 之 前 的 一 个 铺垫 ,让 会 议 的 主持 人 更 容易 营 握 ,控制 好 大 家 思考 
问题 的 趋向 , 少 走 论 路 、 少 跑题 ; 最 重要 的 是 所 有 的 参 会 者 在 了 解 了 今天 会 议 需 要 解决 的 问 
题 后 , 痢 会 做 到 心里 有 数 , 做 出 日 己 的 推测 和 判断 ,事实 验证 有 些 判 断 是 非常 长 远 和 超出 预 
期 的 。 但 是 有 人 怒 怕 会 问 , 有 了 这 样 一 个 明确 又 实际 的 目标 ,会 不 会 把 大 家 规定 在 一 个 框框 
















































































65 


66 


| 交互 设计 的 艺术 一 一 iOS 7 拟 物化 到 扁平 化 革命 





里 ,影响 “头脑 风 其 ”的 结果 , 变 得 不 够 开阔 和 丰 宦 呢 ? 

在 这 里 ,我 们 需要 移 明 日 一 点 : 归根 结 压 ,我 们 玩 “ 头 脑 风 其 ”并 不 是 为 了 游戏 ,而 是 为 
了 得 到 实 实在 在 的 ` 有 价值 和 可 行 的 灵感 和 创意 。 如 有 条 真 的 是 玩 一 个 游戏 ,比如 在 聚会 上 或 
在 办 公 室 里 活路 气氛 , 那 我 们 完全 可 以 随便 从 一 个 出 发 太 开 始 , 然 后 任 其 发 展 下 去 ,结果 最 
好 是 越 不 着 边际 RAR , 越 摘 笑 越 好 ,真正 起 到 了 一 个 游戏 的 娱乐 作用 。 但 是 ,如 采 你 想 让 
我 们 的 “头脑 风 葵 ”真正 达到 预期 效 采 (比如 获得 创意 和 思路 ) ,就 必须 对 它 的 过 程 和 方向 有 
所 干预 ,这 里 面 关 键 的 是 主持 人 的 技巧 。 所 以 我 们 要 明日 ,你 的 目标 越 是 清晰 明确, 就 越 容 
易 得 到 大 家 的 共识 和 配合 ,“ 头 脑 风 对 "的 预期 效果 就 会 越 好 。 那 么 “头脑 风 有 又 "的 目标 具 
体 应 该 如 何 制定 呢 ? 我 们 所 要 设计 的 应 用 程序 内 容 是 不 是 就 可 以 作为 我 们 “头脑 风 雄 ”的 会 
议 目 标 呢 ? 

目标 有 很 多 种 ,我 们 从 以 下 两 个 方向 来 谈 谈 制定 日 标的 思路 。 

1. 是 长 远 目标 ,还 是 近期 目标 

我 们 所 要 设计 的 应 用 程序 内 容 只 能 算 作 我 们 的 长 远 目 标 , 或 者 次 是 最 终 目 标 , 要 想 达 到 
这 个 最 终 目 标 ,我 们 需要 经 历 多 个 层面 的 思考 和 多 个 环节 的 创意 。 比 如 ,我 们 要 设计 一 区 对 
话 式 的 交友 聊天 工具 , 那 首 先 我 们 就 要 对 它 的 概念 进行 思考 : 它 对 应 的 用 户 群 是 哪些 ,是 建 
立 在 一 个 什么 样 的 文化 或 社会 现象 上 的 , 它 属于 哪 一 个 门类 的 应 用 群 ,等 等 。 完 成 了 这 些 思 
考 , 还 要 对 这 区 应 用 的 形式 进行 创意 : 是 以 交友 为 主 ,打造 大 型 交友 社区 功能 呢 , 还 是 以 
聊天 对 话 为 主 , 加 强 语 首 、 视 频传 输 或 图 片 浏览 功能 ,或 者 独 许 踩 径 出 一 套 全 新 的 交流 方 
法 ……, 大 的 方 辐 确定 下 来 ,我 们 还 要 分 析 这 个 应 用 所 需 的 功能 : 包括 需要 哪些 功能 点 ,分 
成 哪 几 个 功能 醒 蕊 ,等 等 ; 之 后 ,我 们 还 要 对 应 用 具体 的 导航 形式 .控件 安排 ` 视觉 色彩 、 字 
体 样 式 等 一 一 进行 创意 和 讨论 。 大 家 可 以 体会 到 ,以 上 每 一 个 环节 实际 上 都 是 至 关 重 要 的 ， 
也 是 达到 完美 用 户 体 验 所 必须 经 历 的 难题 ,而 这 些 难 题 我 们 都 可 以 通过 ”头脑 风暴 ”的 方式 
一 一 去 挖 据 和 整理 出 最 佳 的 解决 办 法 ,甚至 包括 很 多 具体 的 细节 ,比如 应 用 的 名 称 、 图 标 或 
logo , 午 可 以 通过 ”头脑 风 有 又 ”的 方式 寻找 灵感 。 以 上 所 提 到 的 都 是 为 了 实现 长 远 目 标 而 针 
对 各 个 环节 和 层面 浅 生 出 来 的 短期 目标 ,都 是 实 实在 在 .或 待 解决 的 议题 。 

2. 是 具体 目标 ,还 是 抽象 目标 

在 制定 “头脑 风 葵 ”的 目标 和 议题 时 ,为 了 得 到 更 好 的 效 末 ,我 们 还 需要 对 议题 的 “精度 ” 
和 “广度 ”把 握 一 下 ,也 就 是 所 谓 的 具体 目标 和 抽象 目标 的 把 握 : 比较 具体 的 议题 能 使 与 会 
者 较 快 产生 设想 ,主持 人 也 较 容 易 擎 握 , 但 是 结果 往往 也 会 比较 集中 .具体 .单一 ,由 于 圈定 
了 过 于 具体 的 范围 使 得 结果 不 够 丰富 和 随机 ; 比较 抽象 和 宏观 的 议题 引发 设想 的 时 间 可 能 
较 长 ,但 设想 的 创造 性 也 可 能 较 强 , 申 于 议题 的 抽象 性 造成 思考 范围 的 模糊 ,使 得 想象 力 得 
以 寞 无 约束 地 发 挥 出 来 ,其 结果 无 论 是 数量 上 还 是 广度 上 都 会 比较 丰硕 。 

确定 好 "头脑 风暴 ?的 目标 和 议题 了 ,下 面 是 不 是 就 可 以 开始 游戏 ,畅谈 我 们 的 想法 和 灵 
RT? 别 春 急 , 先 看 看 我 们 的 人 手 够 不 够 ,好 好 分 一 下 工 。 

图 4-1 展示 的 是 51work6 团队 在 构思 ”艺术 品 收藏 "这 个 应 用 的 用 户 体验 过 程 中 进行 的 
“头脑 风暴 ”思路 图 。 为 了 得 到 最 佳 的 创意 和 视 党 处 理 , 我 们 先后 进行 了 三 次 "头脑 风 双 ”, 其 
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图 4-1 以 单词 “艺术 品 ? 为 题 的 "头脑 风暴 ” 结 采 树 形 图 
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结果 可 以 在 图 4-1. 8] 4-4 和 图 4-5 中 看 到 。 第 一 次 是 在 刚刚 开始 寻找 思路 的 时 候 , 为 了 得 
到 更 多 样 、 更 广阔 的 思路 ,我 以 ”艺术 品 ? 这 个 单词 为 题目 , 既 明 确 又 抽象 ,试图 把 与 之 有 关 的 
所 有 概念 和 事物 一 网 打 尽 ,然后 在 里 面 搜寻 有 价值 或 可 发 展 的 思路 和 线索 。 结 采 不 出 所 料 ， 
繁杂 而 且 腑 和 肿 ,虽然 里 面 不 乏 与 我 的 目标 曼 不 相干 的 词汇 ,但 是 即使 我 不 标 出 来 大 家 也 能 
到 里 面 充 满 了 创意 的 亮点 ,给 了 我 大 量 的 灵感 。 

第 二 次 “头脑 风 骏 ”的 题目 就 比较 具体 了 ,因为 当时 是 为 了 解决 这 球 应 用 的 功能 结构 ,所 
以 我 以 "艺术 品 收藏 应 用 平台 ?为 题 ,在 主持 会 议 的 时 候 控制 了 一 下 大 的 思考 方向 (是 控制 不 
是 限制 ) ,主要 围绕 应 用 的 “概念 方 呵 ”和 “功能 点 ”展开 联想 ,这 两 个 方 回 一 个 抽象 一 个 具体 ， 
实际 上 解决 的 却 是 同一 个 问题 ( 见 图 4-4)。 而 第 三 次 “头脑 风 骏 ”的 题目 就 更 加 具体 了 ， 
为 当时 需要 解决 的 问题 也 非常 具体 ,分 别 是 应 用 的 “控件 样式 ”和 艺术 品 浏览 的 “导航 方式 ”， 
挡 带 考 虑 一 下 应 用 的 “图 标 ”。 当 然 ,由 于 议题 过 于 具体 ,所 得 到 的 结果 明显 没有 前 面 的 丰硕 
( 见 图 4-5). 


4.1.4 有 合理 的 分 工 


一 般 来 说 ,一 个 完美 的 “头脑 风暴 ”会 以 人 数 在 8 一 12 人 为 宜 , 要 是 多 的 话 一 般 疫 有 限 
制 , 只 要 你 能 控制 得 了 , 少 的 话 最 好 不 要 低 于 5 人 。 与 会 者 人 数 太 少 会 不 利于 信息 的 交流 ， 
无 法 形成 激发 思维 所 需要 的 气氛 ,而 人 数 太 多 的 话 主持 人 不 容易 营 握 会 场 , 并 且 每 个 人 发 言 
的 机 会 相对 减少 。 同 时 人 员 的 映 份 和 背景 不 要 过 于 单一 ,因为 相同 行业 或 类 型 的 人 群 ,思维 
观念 也 会 比较 类似 ,不 利于 “头脑 风暴 ”广度 发 展 及 逆 回 思维 的 产生 。 

谈 到 人 员 的 “背景 ”, 我 们 这 里 并 不 完全 是 指 工作 或 职务 背景 ,也 包括 不 同 的 社会 阶层 、 
不 同 的 年 龄 .性 别 和 人 性格。 对 于 移动 用 户 体验 设计 来 说 ,很 重要 的 是 使 用 不 同 应 用 平台 的 智 
能 手机 用 户 , 以 及 有 着 不 同 兴 趣 爱 好 的 人 群 。 当 然 , 一 般 情 况 下 是 很 难 短 时 间 找 到 这 样 “ 丰 
富 ” 的 人 群 ,而 大 多 情况 是 使 用 工作 中 自己 的 团队 或 同事 们 ,所 以 ,我 们 要 尺 可 能 地 去 充实 参 
与 的 人 群 ,比如 团队 成 员 的 家 属 、 公 司 中 不 同 部 门 的 员工 一 一 销售 、 客 服 \ 保 安 甚 至 保洁 ,我 
的 忠告 是 千 万 不 要 小 看 每 一 个 人 的 想法 : 有 的 人 知识 很 丰富 、 受 的 教育 很 多 ,但 是 脑子 里 的 
观念 却 很 教条 ,思维 过 于 逻辑 和 纺 密 ; 有 的 人 虽然 没有 受过 很 多 的 教育 ,但 脑子 里 没有 条 条 
框框 ,不 受 逻 辑 限 制 ,往往 给 你 珊 来 意 想 不 到 的 惊 豆 ; 还 有 一 种 人 虽然 知识 有 限 、 想 象 力也 
不 太 丰 军 , 但 是 在 生活 中 有 很 多 独特 的 经 验 , 在 有 利 的 激发 下 会 给 你 非常 有 益 的 发 挥 和 
补充 。 

把 人 聚 在 一 起 后 ,需要 进行 明确 的 分 工 。 首先 ,会 议 需 要 主持 人 ,这 个 角色 非 稼 重要 ,一 
般 由 “头脑 风 骏 ”的 发 起 者 目 己 来 担当 ,他 需要 对 整个 会 议 的 议程 进行 控制 ,对 议题 进行 解 
释 , 对 思考 的 内 容 进 行 激发 ,对 思考 的 方 回 进行 把 握 , 最 后 还 要 对 思考 的 结果 进行 评 佑 。 在 
这 里 ,主持 人 能 否 在 “头脑 风 和 又 ?开始 的 时 候 对 议题 做 一 个 合理 的 脑力 激发 很 重要 ,人 简单 地 
说 ,就 是 为 了 引导 大 家 走 进 自己 的 议题 ,需要 在 会 议 开 始 的 时 候 设 计 一 些 铺垫 或 者 插曲 , 比 
如 看 一 段 视 频 . 讲 一 个 故事 ` 看 儿 张 招贴 或 者 干脆 目 己 先 来 , 目 言 自 语 阐述 “ 风 骏 "内容 来 抛 
fe 5|. 
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同时 , 当 “ 风 骏 ” 的 内 容 偏 离 主 题 或 者 无 人 发 言 时 ,主持 人 一 定 要 及 时 说 出 目 己 的 想法 和 
思路 , 既 避 优 了 冷场 ,也 潜移默化 地 调整 了 主题 方 回 ,但 是 这 个 过 程 中 要 谨 记 不 要 否定 和 批 
评 别 人 的 想法 ,要 以 平等 的 映 份 对 别人 的 想法 进行 补充 和 铺垫 。 当 与 会 者 出 现 逻 辑 错误 、 表 
达能 力 不 够 或 者 过 于 吹 唆 的 情况 时 ,主持 人 要 能 够 归纳 出 他 们 所 表达 的 核心 内 容 以 便 记 录 。 
不 过 我 认为 作为 主持 人 最 重要 的 一 点 就 是 要 有 活 哇 会 场 气氛 的 能 力 , 因 为 只 有 大 家 部 放 松 
下 来 了 , 才 会 产生 更 好 的 效果 。 在 会 议 刚 开始 的 时 候 , 大 家 都 不 免 会 有 些 拘谨 ,不 愿意 匈 发 
言 , 甚 至 把 会 议 当 成 了 对 目 己 能 力 的 考验 而 变 得 非常 紧张 。 这 个 时 候 , 主 持 人 一 定 要 问 大 家 
传递 正确 的 心理 暗示: 这 是 游戏 ,不 是 会 议 ; 大 家 是 在 帮助 我 构思 ,没有 任何 的 测试 性 质 ; 
只 需要 把 自己 想到 的 东西 很 目 然 地 说 出 来 ,没有 人 会 批评 或 否定 …… 总 之 ,只 有 让 与 会 者 尽 
可 能 地 处 在 轻松 、 简单. 和谐 的 状态 下 ,才能 获得 更 好 的 效 末 ,这 里 是 非常 需要 主持 人 的 控 场 
能 力 的 。 

除了 主持 人 ,还 需要 一 到 两 名 记录 员 , 把 大 家 的 想法 醒目 地 记录 在 日 板 ( 或 黑板 ) 上 ,让 
与 会 者 能 够 看 清楚 。 记 录 时 要 尽量 简要 ,最 好 能 够 使 用 单词 来 记录 ,这 样 不 会 把 思考 的 结果 
局 限 住 ,还 可 以 有 进一步 的 思考 和 发 挥 想 象 的 空间 。 但 是 有 时 候 容 易 受 到 白板 大 小 的 限制 
和 书写 速度 的 制约 ,我 们 还 可 以 安排 男 一 位 记录 员 使 用 计算 机 来 记录 ,下 接 把 “头脑 风 芭 ” 的 
结果 录入 成 电子 文件 ,方便 会 后 的 评估 和 讨论 。 记 录 ”头脑 风 和 又” 的 软件 我 们 选用 由 美国 
Mindjet 公司 开发 的 “Mindjet MindManager ”( 如 图 4-2 所 示 ), 它 的 树 型 结构 记录 功能 非常 
适合 记录 发 散 式 的 点 状 思维 ,而 且 操作 人 简单 ,移动 .修改 和 调整 起 来 非常 直观 。 
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图 4-2 用 Mindjet 公司 的 Mindjet MindManager 记录 “头脑 风暴 ” 
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议题 选 好 、 分 工 完 成 ,现在 我 们 就 可 以 开始 我 们 的 "头脑 风 骏 ”了 ,其 中 会 有 很 多 需要 注 
意 的 地 方 ,下 面 我 们 简要 介绍 一 下 。 


4.1.5 安排 好 议程 和 环境 


想 要 得 到 理想 的 “头脑 风暴 ” 绪 末 ,很 多 细 贡 是 需要 非 稼 注意 的 ,环境 决 不 可 忽视 。 一 般 
来 说 ,办 公 场 所 的 会 议 室 是 比较 适合 的 ,设施 齐全 、 安 静 舒 适 ,但 也 有 次 庙 , 那 就 是 太 正 式 和 
严肃 ,容易 让 人 感 党 到 压力 ,所 以 很 多 人 喜欢 把 大 家 请 到 咖啡 馆 或 者 餐厅 的 包间 里 ,这 样 的 
场合 容易 让 人 放松 下 来 ,对 于 小 范围 的 人 群 是 很 适合 的 ,往往 一 两 台 笔 记 本 电脑 , 几 张 草稿 
纸 就 可 以 把 会 议 开 得 很 像样 。 但 是 如 果 有 条 件 把 办 公 地 点 的 会 议 室 合理 安排 一 下 ,实在 完 
RAT. 
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图 4-3 51lwork6 的 成 员 们 正在 进行 “头脑 风暴 ”会 议 


(1) 最 好 选用 圆 昧 。 长 条 形 的 会 议 捍 会 给 人 明显 的 等 级 观念 ,而 圆 梨 给 人 的 感觉 更 人 
性 化 和 更 具 杀 和 力 。 

(2) 安放 上 昌 板 (或 黑板 ) 。 用 于 绘制 原型 齐 岁 和 记录 ”头脑 风 又 ”的 心智 图 , 息 板 可 以 春 
色 , 比 黑板 和 粉笔 的 表现 力 强 ,但 要 因 环 境 而 定 。 

(3) 投影 或 电视 机 。 用 来 进行 脑力 激发 ,在 “头脑 风 雄 ”过程 中 播放 与 议题 相关 的 视频 
或 图 片 , 有 利于 想象 力 的 发 挥 。 
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(4) 电脑 和 相机 。 用 来 记录 “ 风 葵 ”内容 ,如 果 日 板 写 满 了 必须 擦 掉 时 , 别 忘 了 用 相机 拍 
下 来 ,当然 了 ,我 们 的 智能 手机 的 担 照 功能 就 足够 用 了 。 

(5) 草稿 纸 、 铅 笔 、 胶 条 和 马 死 笔 。 有 时 候 我 们 震 要 把 想法 图 解 在 纸张 上 或 者 二 接 以 网 
形 的 方式 阐述 ,再 把 它们 贴 在 折 板 上 连贯 起 来 ,这 些 琐 雁 的 工具 确实 必 不 可 少 。 

(6) 饮料 和 点 心 。 千 万 别 忽视 ,这 可 是 放松 心 仿 .制造 撒 围 的 利信 。 

这 样 ,一 个 完美 的 “头脑 风 参 "会议 环境 就 实现 了 , 接 下 来 就 要 安排 好 合理 的 议程 了 。 

一 般 情 总 下 ,会 议 的 时 间 长 度 最 好 安排 在 一 个 小 时 左右 ,最 好 不 要 超过 两 个 小 时 , 当然 
也 不 要 太 简 短 。 经 验 表 明 ,创造 性 较 强 的 设想 一 般 要 在 会 议 开 始 10— 15min 后 才 会 逐渐 产 
生 , 而 太 长 的 过 程 则 容易 产生 疫 务 感 , 影 响 会 议 效 末 。 所 以 ,如 采 需 要 更 多 的 时 间 完 成 议题 ， 
我 们 可 以 把 它 拆 解 成 几 个 问题 分 期 完成 。 

在 会 议 开 始 的 时 候 , 如 果 有 人 是 第 一 次 参加 “头脑 风 雄 ”会议 的 ,主持 人 要 先 把 规则 和 要 
求 曾 述 一 下 ,之 后 最 好 把 要 做 的 项 目 和 大 家 分 至 一 下 ,让 参 会 者 了 解 你 的 用 意 、 理 解 你 的 初 
K ,做 到 心里 有 数 , 这 时 束 可 以 把 今天 的 目标 和 议题 说 出 来 了 。 

在 参 会 者 开始 阐述 日 己 的 想法 之 前 ,有 两 个 环 市 非 第 重要 : 一 个 是 让 会 场 进 入 一 个 放 
松 和 随意 的 氛围 中 ,为 一 个 就 是 有 效 的 思维 和 脑力 的 激发 。 前 面 我 们 谈 过 ,这 是 需要 主持 人 
的 旋 谐 和 感染 力 的 ,当然 ,也 可 以 通过 一 些 手 段 来 达到 ,比如 小 音量 播放 一 些 轻松 的 背景 首 
乐 ,播放 一 些 与 今天 的 主题 相关 的 视频 片段 或 图 片 。 注 意 , 千 万 不 要 播放 其 他 设计 师 设计 的 
同类 产品 的 创意 ,那样 会 把 大 家 引入 上 攻 途 ,失去 应 有 的 想象 力 , 最 好 是 与 主题 相关 的 一 些 线 
索 , 例 如 : 如 果 你 要 设计 一 球 购 物 应 用 平台 ,那么 你 可 以 给 大 家 看 看 你 将 要 销售 的 商品 ; 如 
果 你 要 设计 一 于 酒店 和 机 票 的 预订 程序 ,那么 就 给 大 家 浏览 一 些 酒店 和 机 场 的 环境 、 预 订 的 
流程 和 操作 细 市 ; 如 果 你 要 设计 一 款 赛 车 游戏 , 那 就 给 大 家 看 一 些 Fl 拉力 赛 的 视频 集 锅 
吧 。 总 之 ,能 够 让 大 家 放松 的 同时 ,在 头脑 中 产生 一 些 实 实在 在 的 联想 和 思考 就 足够 了 。 

激发 与 会 者 的 想象 力 , 有 时 候 要 善于 开 一 个 好 头 ,不 要 指望 参 会 者 能 主动 地 开始 发 言 ， 
他 们 的 发 言 ,往往 都 是 从 回答 或 者 补充 你 的 疑问 和 想法 开始 的 ,因此 ,要 善于 通过 说 出 浅显 
和 直观 的 想法 ,引导 大 家 说 出 各 目的 联想 和 思考 结 

图 4-4 展示 的 是 为 了 完善 “艺术 品 收藏 * 这 个 应 用 平台 的 用 户 体 验 设 计 , 我 们 团队 进行 
的 第 二 次 “头脑 风 雄 ”实践 ,这 次 的 目的 是 完善 应 用 的 功能 结构 。 在 会 议 前 ,我 们 做 了 很 多 准 
备 , 首 和 完 收集 了 一 些 不 同门 类 经 典 艺 术 品 的 高 清 图 刻 , 以 及 不 同 艺 术 流 派 的 招 卖 行情 、 欣 蓉 
方式 和 浅显 的 理论 知识 ,同时 还 找到 了 一 些 与 艺术 收藏 相关 的 广告 .评论 的 视频 。 

会 议 一 开始 ,为 了 把 握 气 质 ,在 介绍 完 “ 头 脑 风 又 ”要求 和 我 要 设计 的 应 用 方 癌 后 ,我 先 
不 让 大 家 发 言 , 而 是 放松 地 听 我 聊 一 聊 艺 术 品 收藏 的 一 些 故事 , 边 听 故事 边 看 画面 ,大 约 十 
分 钟 后 ,大 家 就 非常 目 然 地 做 出 了 回应 ,这 时 我 把 日 己 的 一 些 还 不 成 熟 的 灵感 和 设想 说 了 出 
来 ,立刻 得 到 了 很 多 回应 和 补充 。 就 这 样 ,“ 风 烘 " 顺 利 开 始 ,60 分 钟 的 时 间 过 得 很 快 ,也 很 
充实 ,通过 图 4-4 的 树 形 图 我 们 可 以 看 到 结果 ,无 论 是 内 容 还 是 数量 部 令 我 比较 满意 ,达到 
本 预期 的 效果 。 
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图 44 针对 “艺术 品 收藏 应 用 平台 ?功能 结构 的 “头脑 风 有 又 ? 树 形 网 
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在 结尾 评 佑 时, 我们 把 几 个 公认 比较 可 行 的 思路 标记 出 来 ,很 多 想法 里 然 有 些 不 切实 际 
甚至 离 题 万 里 (关于 对 作品 进行 修改 和 拼 贴 , 这 完全 违背 了 对 艺术 收藏 品 和 艺术 家 的 工 重 ， 
也 侵犯 了 知识 产权 ) ,但 是 我 们 都 把 它们 认真 地 记录 下 来 加 以 评论 ,因为 这 才 是 “头脑 风 骏 ” 


最 珍贵 的 部 分 。 
4.1.6 畅所欲言 但 要 过 守 规 则 


在 “ 风 骏 ”进行 中 ,经 常会 发 生意 想不到 的 事情 ,要 么 会 议 冷场 ,无 人 发 言 ; 要 么 发 言 太 
多 无 法 整理 ; 有 时 还 会 破坏 规则 其 至 产生 争论 ,这 部 是 很 正 第 的 现象 。 作 为 “头脑 风 骏 ”的 
举办 者 或 主持 人 ,一 个 是 要 善于 轨 驭 会 场 气质 ,再 一 个 就 是 要 涤 刻 理解 游戏 的 规则 。 作 为 
“头脑 风 雄 ”的 游戏 规则 ,在 这 里 非常 有 必要 解析 一 下 。 

(D 不 允许 批评 。 从 大 的 方面 来 说 ,批评 会 扼杀 想象 力 的 产生 。 对 于 “头脑 风 雄 ”来 说 ， 
观点 没有 对 与 错 、 好 与 坏 、 可 行 与 不 可 行 的 区 分 ,虽然 我 们 需要 各 种 观点 相互 碰撞 ,但 是 碰撞 
的 结果 绝 不 是 淘汰 ,而 是 要 产生 更 多 、 更 新 的 观点 和 想法 。 所 以 , 参 会 者 只 可 在 别人 的 观点 
上 补充 和 发 挥 , 绝 不 能 否定 或 贬低 。 批 评 还 会 使 参 会 者 由 于 思路 不 清晰 或 不 完善 而 状 于 开 
口 ,天 失 了 和 大 家 共同 思考 的 机 会 。 

(2) 玖 励 天 马 行 空 。 在 不 许 批评 的 前 提 下 ,主持 人 还 要 善于 驶 励 参 会 者 把 他 们 认为 太 
离谱 的 、 不 可 行 的 观点 说 出 来 ,因为 通过 大 家 的 补充 和 完善 ,这 些 想法 也 许 能 转化 成 可 行 ,或 
者 这 些 想法 本 里 还 可 以 局 发 出 其 他 更 有 创意 的 想法 ,这 才 是 “头脑 风 共 ”的 精髓 ,所 以 参 会 者 
要 打开 心 屡 , 放 开 思 路 ,让 思维 自由 驰 台 。 

(3) 要 人 退 求 数量 。 不 要 在 一 个 创意 点 上 纠结 太 长 时 间 ,一 定 要 在 有 限 的 时 间 里 尽 可 能 
多 地 产生 不 同 的 想法 和 观念 , 玖 励 标新立异 ,与 众 不 同 。 “头脑 风 又 "的 特点 要 求 观 点 要 多 样 
且 相 互 碰撞 ,这 样 才 能 产生 更 新 、 更 成 熟 的 创意 ,所 以 要 尽 可 能 地 使 各 种 想法 达到 一 定 的 数 
量 , 数 量 越 多 ,效果 越 好 。 

(4) 禁止 交谈 。 主 持 人 必须 注意 要 制止 参 会 者 进行 私下 的 、 无 关 的 交谈 ,这 会 影响 其 他 
成 员 的 注意 力 , 妨 碍 新 想法 的 创造 。 同 时 主持 人 也 要 善于 制止 发 言 者 进行 补充 式 的 交谈 , 比 
如 过 多 的 解释 上 日 己 的 想法 或 补充 一 些 无 用 的 信息 ,这 样 既 浪 费时 间 , 又 干扰 了 他 人 的 
AH. 

(5) 要 结合 、 改 善 别人 的 创意 。 拥 有 大 量 天 马 行 空 的 想法 和 观点 并 不 是 我 们 “头脑 风 
AE" 的 结 末 ,主持 人 要 善于 对 这 些 想法 进行 整合 ,它们 就 像 一 堆 原 夏 , 需 要 细心 地 整理 .打磨 
和 提炼 。 我 们 可 以 通过 “质疑 风 其 ”来 提 炮 ,也 可 以 把 不 完整 的 想法 结合 起 来 或 改善 。 

从 前 面 的 实例 可 以 看 到 ,“ 头 脑 风 雄 ” 可 以 分 阶段 地 做 ,也 可 以 反复 地 做 ,在 “ 风 芭 ”进行 
中 也 可 以 暂 集 ,通过 休息 来 调整 议题 的 进程 。 那 么 在 “ 风 雄 ”结束 后 ,能 否 合理 地 对 所 有 想法 
进行 整理 和 评估 ,就 变 得 尤为 备 要 了 。 

图 4-5 展示 的 是 我 们 团队 针对 “艺术 品 收藏 应 用 ”进行 的 第 三 次 “头脑 风 共 ”。 这 一 次 会 
议 我 们 选择 在 绘制 原型 草图 的 过 程 中 ,由 于 面 对 的 问题 已 经 非常 具体 了 ,因此 题目 也 就 选择 
得 非 第 明确 ,分 别 是 应 用 的 “控件 样式 ”和 艺术 品 浏 览 的 “导航 方式 ”, 顺 便 考 不 一 下 应 用 的 













































































73 


74 


| 交互 设计 的 艺术 一 iOS 7 拟 物化 到 扁平 化 革命 


- Lud 
— — ed qi 入 器 ^1 | 
- J ` i 
3L 1 Ap $E cm y exe 
= i [二 T sÉ “| 22b 
- ) ; 4x X : 
Xp PR | az. PEN LAE 
> e d X poe £N er mh 
BRZI ZR] ibo VU. awa ae 
Ts [V O5) ' 258. 1 | 
» x — i 







MENT: s= 
AS 
Te m 


e a Nd 
alta 





图 4-5 针对 “艺术 品 收藏 应 用 平台 ”图标 、 控 件 样式 和 导航 方式 的 “头脑 风暴 ” 





“图 标 ”。 参 加 的 人 员 也 并 不 是 很 多 ,请 来 了 画家 本 人 及 其 家 属 , 以 及 设计 团队 所 有 成 员 的 家 
属 。 当 然 ,由 于 议题 比较 具体 ,所 得 到 的 结果 明显 没有 前 面 的 丰硕 ,但 是 非常 的 实际 、 可 行 。 


4.1.7 挑选 出 最 有 前 途 的 想法 


在 “头脑 风 雄 ”结束 后 ,我 们 还 有 一 些 工作 需要 完成 ,这 里 面 须 要 会 上 解决 的 ,也 有 些 
可 以 在 会 下 完成 ,核心 就 是 如 何 提 炬 出 最 可 行 的 方案 ,挑选 出 最 有 前 途 的 想法 。 

首先 要 做 的 是 澄清 所 有 不 清楚 的 表述 和 有 上 紧 义 的 条 目 , 确 保 所 有 的 观点 在 所 有 的 参 会 
者 面前 清晰 可 见 。 把 记录 员 录 和 人 在 计算 机 上 的 所 有 条 目 进 行 简单 的 修改 和 整理 (这 个 时 候 
FLBUSHB A AS YO , 接 入 到 投影 或 电视 屏 医 上 展示 给 大 家 。 如 打数 据 过 多 无 法 当场 进行 
评 佑 的 ,可 以 由 记录 员 会 下 整理 后 , 另 选 时 间 安 排 评估 会 议 。 

接 下 来 ,就 是 要 删除 掉 量 无 价值 的 或 者 脐 离 主题 的 条 目 了 ,这 个 过 程 也 需要 很 导 重 , 必 
须 充 分 地 和 参 会 者 交流 之 后 再 删 掉 它们 ,同时 还 要 把 相同 或 相近 的 条 目 进行 合并 ,这 样 剩 下 
的 条 目 就 都 是 很 有 价值 的 想法 了 。 

我 们 对 这 些 有 价值 的 条 目 进行 排序 ,最 贴近 主题 的 和 最 有 发 展 空间 的 排 在 前 面 。 此 时 
要 注意 ,有 些 想 法 表面 上 看 来 不 那么 重要 ,但 是 也 许 稍 加 雕琢 会 变 得 非常 有 前 途 ,而且 , 针 对 
当前 的 项 目 虽 然 不 那么 重要 ,也许 在 未 来 的 项 目 里 会 成 为 很 有 价值 的 想法 ,所 以 ,所 有 的 条 
目 乔 不 能 轻易 地 售 奔 ,把 它们 保存 好 ,说 不 定 在 几 年 之 后 都 能 产生 价值 。 “头脑 风暴 ”的 意义 
并 不 完全 在 于 针对 亚 待 解决 的 构思 , 它 本 身 就 是 一 种 积累 ,经 解 做 “头脑 风 和 又 "的 团队 普遍 思 
维 敏捷 ,头脑 中 的 想法 丰富 .思路 票 多 ,这 都 是 长 期 积 紫 的 结 

如 打 剩 下 的 条 目 依 然 很 多 ,那么 可 以 让 每 个 参 会 者 都 挑选 出 他 们 认为 最 理想 的 3 个 想 
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法 ,并 给 这 3 AR H HEF ,这 样 文 持 率 最 高 的 条 目 就 一 目 了 然 了 。 根 据 情况 ,最 终 科 选 出 来 
的 创意 我 们 还 可 以 通过 投票 ,少数 服从 多 数 来 达成 最 终 的 共识 。 当 然 , 这 个 最 终结 果 是 不 是 
真正 的 符合 设计 的 最 终 需 求 还 需要 在 设计 过 程 中 反复 考验 ,所 以 ,我 们 不 必 着 急 选 出 最 终 的 
结果 ,而 是 应 该 把 这 些 有 价值 的 结果 夯 成 草图 ,通过 相对 和 直观 的 方法 对 它们 进行 规范 和 
测试 。 

















4.2 原型 草图 








在 “头脑 风 骏 ?结束 后 ,我们 得 到 了 和 寿 干 个 创意 思路 或 设计 灵感 ,但 它们 还 仍然 是 一 些 抽 
象 的 概念 或 词汇 , 想 要 把 它们 变 成 比较 直观 的 设计 效 末 ,我 们 需要 动手 在 速写 纸 上 把 它们 画 
成 草图 ,这 就 是 设计 的 “原型 草图 ”。 原 型 草图 的 制作 可 以 帮助 我 们 把 抽象 的 想法 具体 化 ,对 
不 完善 的 创意 进行 补充 ,对 已 经 成 型 的 思路 进行 扩展 和 充实 。 

我 们 的 原型 草图 是 需要 手绘 在 纸张 上 的 ,很 多 读者 可 能 会 出 于 对 计算 机 的 依赖 以 及 受 
日 身 绘画 技能 的 限制 ,不 愿意 选择 手绘 而 布 望 使 用 一 些 诸如 Illustrator, Fireworks 这 样 的 
绘图 软件 或 者 原型 设计 软件 来 完成 原型 草图 的 制作 。 虽 然 我 们 并 不 反对 使 用 原型 设计 软 
件 , 而 且 后 面 我 们 还 会 回 大 家 介绍 几 丈 非常 好 用 的 原型 设计 软件 ,但 我 们 还 是 硕 望 大 家 不 要 
过 于 依赖 于 这 些 软件 而 完全 放弃 尝试 手工 绘图 ,因为 制作 原型 草图 的 目的 并 不 完全 是 为 了 
表现 设计 的 结 采 ,而 是 进一步 激发 灵感 和 再 创意 ,所 以 手绘 的 优势 是 无 法 蔡 代 的 ,也 是 一 个 
合格 的 设计 师 应 该 具备 的 技能 ,所 以 在 本 章 里 我 们 不 但 会 告诉 大 家 手绘 的 好 处 ,还 会 由 浅 和 人 
深 地 为 大 家 讲解 各 种 手绘 的 技巧 。 


4.2.1 手绘 的 原型 午 图 


为 什么 一 定 要 选择 手绘 来 完成 原型 草图 的 制作 ? 

首先 是 为 了 创意 的 需要 。 我 们 得 到 了 一 个 很 好 的 想法 , 想 要 把 它 变 成 实 实在 在 的 设计 
成 果 , 这 个 过 程 是 需要 多 次 的 编辑 、 测 试 和 修改 的 ,首先 是 原型 设计 的 草图 阶段 ,之 后 是 基于 
平台 规范 的 细 贡 设计 及 调整 ,最 后 是 高 保 真 的 原型 成 品 。 每 一 个 步 又 的 编辑 和 修改 都 是 至 
天 重要 的 ,而 原型 更 图 阶段 可 以 说 是 这 些 步 对 中 最 原始 ,也 是 最 需要 创造 力 的 环 闻 。 过 程 中 
设计 师 必 须 抓 住 主体 ,直接 地 表现 出 应 用 的 工作 流程 、 功 能 点 和 整体 布局 ,不 能 把 精力 分 散 
在 局 部 和 细节 上 。 手 工 绘图 的 特点 是 灵活 、 快 速 .直接 而 且 概 括 。 由 于 灵活 、 快 速 , 表 现 原 型 
的 过 程 可 以 跟 得 上 设计 思路 的 速度 , 想 怎么 画 承 怎么 画 、 想 到 哪 画 到 哪 , 不 会 受到 任何 的 制 
约 和 限制 。 但 是 计算 机 软件 就 不 同 了 ,首先 是 无 法 直接 表现 创意 和 想法 ,受到 各 种 图 形 工具 
的 限制 ,而 且 表 现 力也 很 单一 , 没 法 目 如 地 表现 曲线 和 动态 ,更 重要 的 是 容易 受到 各 种 软件 
特有 的 图 形 样式 的 族 惑 ,丧失 了 目 主 的 表达 理念 ,把 原型 草图 变 得 单调 、 雷 同 或 者 不 伦 
^3, 

T4853 AIREZ BILD a C E. 粗糙 算是 优点 吗 ?” 对 于 绘画 艺术 的 表现 手法 
来 说 ,粗糙 很 多 情况 下 都 是 优点 。 比 如 ,我 们 知道 ,有 一 种 艺术 流派 就 叫做 “表现 主义 ”( 见 
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图 4-6) ,画家 利用 了 近乎 于 儿童 画 的 粗略 笔法 ,表现 了 一 些 既 现实 又 大 诞 的 意象 ,虽然 看 起 
来 有 些 费 解 , 但 实际 上 最 大 限度 地 激发 了 观看 者 的 想象 力 , 也 使 人 们 很 容易 受到 艺术 家 情绪 
和 想象 力 的 感染 和 共鸣 。 那 么 对 于 原型 草图 也 是 这 样 ,我 们 表现 出 来 的 并 不 是 最 终 的 设计 
结果 ,而 是 一 个 充满 了 各 种 可 能 性 的 草图 ,可 修改 、 可 发 展 、 可 沟通 、 可 推翻 ,所 以 越 粗糙 的 草 
图 修改 的 余地 就 越 大 。 而 面 对 一 张 精 确 、 细 致 的 草图 ,大 家 无 论 从 心理 上 还 是 感情 上 都 不 愿 
意 过 多 的 修改 或 推翻 ,同时 ,由 于 先 人 为 主 产 生 了 已 经 成 为 既定 现实 的 心理 ,也 会 阻碍 创意 
的 继续 、 发 展 和 讨论 。 





(a) WIR (b) 生日 宴会 


图 4-6 挪威 画家 爱德华 ， 蒙 克 (Edvard Munch) “呐喊 ” 
和 俄国 画家 马克 ? H Jill ZR CMapk maram “Æ H TA” 


图 4-7 表现 的 是 51work6 团队 开发 的 "2016 Olympics” 的 主页 设计 ,在 手绘 原型 草图 的 
基础 上 ,设计 师 给 出 了 三 种 不 同 的 设计 样式 供 大 家 挑选 和 讨论 。 我 们 可 以 看 出 虽然 手绘 的 
原型 草 网 线条 非常 简略 而 且 模 校 两 可 ,但 是 为 最 终 的 设计 创意 和 表现 手法 提供 了 很 多 的 思 
路 和 可 能 性 。 因 此 ,我 们 要 善于 通过 手绘 表现 你 的 创意 和 想法 ,表现 的 过 程 就 是 激发 你 的 灵 
感 和 继续 创意 的 过 程 。 

手绘 原型 草图 还 有 一 个 很 午 要 的 优点 , 屠 就 是 便于 团队 有 交流、 沟通 和 合作 。 由 于 手绘 的 
草图 具有 和 直接、 人 简略 和 模 梭 两 可 的 特点 ,所 以 看 上 去 往往 是 不 完善 和 未 完成 的 ,那么 其 他 人 
也 愿意 带 你 完善 或 者 补充 他 们 的 想法 ,而 这 些 帮 助 是 非常 可 吐 的 。 但 是 计算 机 软件 制作 出 
来 的 原型 草图 往往 受到 软件 功能 的 影响 ,比如 标尺 、 对 齐 、 圆 角 \、 癌 导 等 ,会 不 目 然 地 陷入 到 
对 细 广 的 完善 和 把 握 中 ,最 终 完 成 的 结果 很 可 能 已 经 很 具体 了 ,别人 看 到 了 这 样 的 结果 会 认 
为 你 的 设计 已 经 快要 完成 ,往往 就 不 愿意 再 提出 修改 意见 或 者 不 愿意 有 重大 的 改变 。 

那么 既然 一 定 要 选择 手绘 来 完成 原型 草图 的 设计 ,应 该 如 何 下 手 呢 ? 男 的 时 候 要 注意 
些 什 么 呢 ? 下 面谈 一 谈 手 绘 草 图 的 经 验 和 技巧 ,以 及 需要 注意 的 要 点 。 
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图 4-7 5lwork6 开发 的 “2016 Olympics” 项 目的 三 款 主 页 设计 


4.2.2 REBRE 


了 解 了 手绘 原型 草图 的 特性 和 优点 ,我 们 更 应 该 感到 目 信 ,因为 我 们 绘制 的 并 不 是 艺术 
作品 , 既 不 考验 你 的 绘画 水 平 ,也 不 要 求 你 有 绘画 功底 ,幼稚 和 粗糙 在 某 些 情况 下 反而 成 为 
了 了 优点。 唯一 的 要 求 就 是 能 够 快速 和 概括 地 把 你 的 想法 表现 出 来 ,当然 , 单 是 这 一 点 要 求 也 
是 很 不 容易 的 ,所 以 我 们 建议 大 家 在 条 件 人 允许 的 情况 下 ,了 解 一 些 绘画 的 基本 常识 ,和 擎 握 一 
些 绘画 的 基本 技 马 ,这 样 我 们 的 草图 才 会 更 具 表 现 力 和 专业 性 。 总 的 来 说 ,我 们 需要 保持 的 
状态 ,就 是 “ 渡 齐 但 要 认真 ”, 既 不 能 完全 放 开 手 笔 在 纸 上 糊 涂 乱 画 , 也 不 能 说 小 蛋 微 地 在 纸 
EEMAL. Hr BRE. 138 iL 7r E HJ Ze Jv . 1E 26 36 ZP 3E 48 T- 22 56 K B 22: hi 
1x13, 

1. 用 最 简单 的 工具 

在 表现 头脑 中 的 创意 和 想法 时 ,我 们 一 定 要 选择 最 快 和 最 直接 的 方法 ,不 要 想象 把 画面 














78 


| 交互 设计 的 艺术 一 一 iOS 7 拟 物化 到 扁平 化 革命 








绘制 得 多 么 完美 和 丰富 ,一般 情况 下 也 不 用 着 色 , 更 不 能 受到 工具 的 限制 。 所 以 ,要 选择 使 
用 最 简单 的 工具 : 铬 笔 ( 目 动 的 最 好 ) 没 有 格 的 纸张 (最 好 是 速写 本 )、 签 字 笔 或 圆珠笔 。 一 
般 情 况 下 ,这些 就 足够 卫 。 诸 如 三 角 板 . 紫 形 矿 和 曲线 板 是 不 推 戎 使 用 的 ,有 的 人 担心 目 己 
的 线条 画 得 不 够 直 , 昌 线 画 得 不 够 流畅 i ER fe: BI E XS EL Ho v6 98 B OL BU SE ES ,但 结 采 依然 
是 被 这 些 工具 约束 了 想象 力 而 无 法 上 自由、 快速 地 表达 ,所 以 干 万 不 要 害怕 上 自己 的 线条 男 得 不 
够 下 或 流畅 ,多 男 一 些 , 自 然 就 熟 能 生 巧 了 。 

如 琳 草 图 需要 修改 ,也 最 好 不 要 使 用 橡皮 ,更 不 能 使 用 涂改 液 ,因为 我 们 的 观点 是 : 把 
所 有 的 错误 留 在 纸 面 上 。 在 记录 思维 和 想法 的 时 候 , 所 有 的 否定 和 修改 实际 上 痢 是 思维 的 
过 程 , 现 在 觉得 不 完美 ,也 许 将 来 会 觉得 更 适合 ,所 以 尽量 不 要 把 认为 错误 的 线条 擦 挥 ,我 们 
的 方法 是 : Jo Hn te DURER , 册 用 签字 笔 或 圆珠笔 进行 二 次 描绘 ,这样 既 可 以 把 原来 错误 
的 地 方 改过 来 ,还 可 以 对 原来 含混 的 地 方 加 以 肯定 ,而 签字 笔 的 墨 线 要 比 铅笔 深 得 多 (最 好 
选用 比较 淡 的 铅笔 ,如 2H 或 HB), 所 以 从 视 党 上 网 会 以 签字 笔 的 墨 线 为 主 , 只 有 仔细 看 才 
可 以 看 到 铅笔 线 , 示 例 图 如 图 4-8 所 示 。 如 果 一 定 要 把 铅笔 线 去 挥 ,我 们 推荐 大 家 选用 可 逆 
橡皮 来 擦 除 ,因为 它 的 特性 是 无 法 把 铅笔 线 彻 压 擦 除 干 滔 , 而 且 可 塑 的 特性 可 以 帮助 我 们 选 
择 性 地 进行 擦 除 , 这 样 控 除 的 过 程 也 成 为 了 表现 和 创作 的 过 程 ,一 举 两 得 。 

绘制 草图 的 时 候 一 定 不 要 害怕 男 错 或 者 失败 ,不 要 奢 望 一 次 成 功 ,多 男儿 张 ,总 会 得 到 
完美 的 绪 来 。 也 不 要 嫌 画 面 姿 乱 ,前面 我 们 曾 述 过 , 姿 乱 而 模棱两可 的 线条 更 有 助 于 我 们 发 
挥 想象 力 、 交 流 和 再 创意 。 
































图 4-8 5lwork6 开发 的 “价格 线 " 应 用 原型 草图 的 铬 笔 稿 ` 墨 稿 及 最 终 设 计 稿 








2. 虚实 .阴影 和 动态 

为 了 增强 手绘 草图 的 表现 力 ,我 们 要 善于 变换 不 同 的 表现 手法 ,使 画面 更 加 的 活跃 而 充 
满 内 润 。 因 此 ,使 用 单一 而 均匀 的 线条 来 表现 是 不 可 取 的 ,我 们 要 用 铅笔 在 画面 上 表现 出 虚 
实 、 空间 和 动态 来 , 听 上 去 似乎 有 些 难 度 ,但 是 答 试 一 下 也 许 并 没有 想象 中 那么 复杂 。 

首先 是 表现 画面 中 的 “虚实 >。 我 们 在 描画 图 形 和 事物 的 时 候 , 根 据 创 意 的 需要 ,有 了 时 需 
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要 精确 、 肯 定 , 有 时 要 模糊 含混, 这 就 害 要 在 用 笔 的 时 候 有 所 区 别 , 勾 画 的 时 候 , 就 要 有 实 
线 ` 有 虚线 ,有 深 线 (签字 笔 的 墨 线 )\ 有 浅 线 ( 铬 笔 线 ) ,使 它们 各 尽 其 用 ,相得益彰 。 需 要 注 
意 的 是 ,在 表现 转角 和 连接 点 的 时 候 , 要 用 心 处 理 并 在 细节 上 加 以 区 分 ( 见 图 4-9): 如 条 想 
法 明确 和 肯定 ,要 使 线条 交叉 ,这 样 的 处 理 看 上 去 很 结实 ,也 很 精确 ; 如 末 思 维 含混 或 还 在 
ITR ,要 使 线条 上 断 开 ,这 样 给 今后 的 人 补充、 修改 和 讨论 留 有 空间 ,别人 看 上 去 也 会 有 硕 望 玫 你 
修改 完善 的 欲望 。 如 果 把 所 有 的 线条 精准 地 结合 在 一 起 ,表面 上 很 工整 ,其实 是 不 可 取 的 ， 
既 没 有 表现 力 , 也 丧失 了 继续 思考 的 余地 。 



































图 4-9 左 图 使 用 了 交叉 线 的 处 理 , 看 上 去 更 精确 ; 
右 图 把 线条 断 开 ,为 继续 思考 留 有 余地 ; 中 图 把 所 有 的 线条 封 死 的 做 法 不 可 取 


同时 ,还 要 设法 把 物体 、 控 件 及 图 标的 空间 和 体积 感 表现 出 来 ,这 对 稍 有 素描 经 验 的 设 
计 者 来 说 并 不 是 一 件 难 事 。 当 然 , 我 们 这 里 没有 足够 的 篇 革 来 帮助 大 家 了 解 诸如 透视 法 则 、 
光影 体积 的 相关 知识 ,而 且 得 到 这 些 知 识 的 途径 也 有 很 多 。 在 这 里 ,我 们 主要 谈 谈 描 绘 原型 
草图 的 时 候 , 如 何 表现 事物 的 体积 感 和 空间 感 。 前 先是 对 体积 的 表现 和 干 万 不 要 过 量 , 轻 描 淡 
写 ,点 到 为 止 就 行 了 了 。 同 时 要 选择 合适 的 表现 方法 ,方法 很 多 样 ,根据 设计 师 的 风格 和 习惯 ， 
比如 ,用 铅笔 随意 地 潜 抹 少量 的 阴影 , 沿 厦 造型 的 右 \、 下 边 勾 画 双 线 , 使 用 淡 灰 色 的 马克 笔 
等 ,当然 最 好 可 以 把 上 述 的 这 些 技 巧 结合 起 来 ,示例 如 图 4-10 所 示 。 

最 后 ,我 们 要 把 交互 和 旋转 的 动态 表现 出 来 ,主要 通过 重合 和 各 种 家 涉 来 实现 。 重 全 就 
是 表现 物体 运动 过 程 的 重 影 ( 如 图 4-11 所 示 ) ,箭头 的 使 用 就 比较 广 了 , 既 可 以 表现 物体 运 
动 的 方向 (如 图 4-12 所 示 ), 也 可 以 表现 不 同 界 面 间 的 交互 关系 (如 图 4-13 所 未 ) ,还 可 以 表 
现 导 航 、 进度 和 弹出 等 。 

3. 把 声音 和 振动 也 画 出 来 

手绘 原型 草图 的 表现 力 是 无 穷 的 ,除了 上 述 这 些 有 形 的 和 具象 的 事物 ,有 时 我 们 还 可 以 
根据 需要 ,勾画 出 一 些 无 形 和 抽象 的 事物 ,比如 内 烁 ,声音 和 振动 (如 图 4-14 所 示 )。 
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图 4-10 用 铅笔 或 马 死 笔 表现 体积 感 


图 4-12 用 箭头 表现 运动 方 回 





图 4-13 表现 界面 的 交互 关系 
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图 4-14 RME AT CRISE B SAARE CO E E A AKE N ER 8 È AR BID 


4.2.3 原型 工具 和 原型 设计 软件 


用 手绘 的 方式 完成 原型 草图 设计 的 优势 固然 明显 ,但 是 仍然 有 很 大 一 部 分 开发 者 或 是 
程序 员 认 为 自己 不 具备 手绘 的 能 力 , 既 没 有 接受 过 绘图 的 训练 ,也 不 具备 绘画 的 天 分 。 有 没 
有 办 法 能 够 避 开 绘画 技能 的 限制 或 手工 绘图 的 困难 而 实现 原型 草图 的 设计 呢 ? 本 证 将 为 大 
家 介绍 一 些 很 有 效 的 工具 。 

1. 原型 设计 模板 

由 Suki Kits 公司 生产 的 原型 设计 模板 套装 是 一 个 比较 好 的 选择 (如 图 4-15 所 示 ), 根 
据 不 同 的 应 用 平台 ,他 们 生产 了 不 同 的 产品 套装 ,包括 了 10S 平台 的 iPhone 和 iPad, 
Android 平台 的 各 个 版 本 以 及 Windows Phone 平台 产品 。 模 板 由 不 锈 钢 制 成 ,精度 很 高 ， 
上 面包 括 了 各 应 用 平台 的 状态 栏 .标签 柱 和 确认 按钮 等 几乎 所 有 基本 控件 样式 , 旦 完全 符合 
造型 规范 和 大 小 规格 ,边缘 还 市 有 以 像素 (px) 为 单位 的 刻度 。 

套 闭 里 还 配 有 印 春 手 机 或 平板 电脑 图 形 的 设计 绘图 纸 ( 如 岁 4-16 所 示 ) ,规格 与 模板 一 
致 ,便于 使 用 者 用 模板 直接 在 相应 的 产品 图 形 里 设计 、 勾 画 。 使 用 模板 套装 最 大 的 优点 就 是 
可 以 准确 地 男 出 应 用 的 真实 大 小 ,有 助 于 进一步 的 细 市 推敲 ,也 确实 能 达到 快速 .精确 和 标 
准 的 效果 ,只 是 局 限 性 有 点 大 ,毕竟 模板 的 内 容 是 有 限 的 ,而 有 旦 容易 禁 铜 想象 力 。 

2. 几 款 原型 草图 设计 软件 

前 面 曾 经 提 到 ,完全 放弃 手工 绘图 并 不 是 不 可 能 的 ,我 们 询 知 的 图 形 设计 软件 有 
Illustrator、Photoshop、Fireworks 和 Visio 等 ,都 可 以 满足 我 们 原型 草图 的 设计 要 求 , 只 是 
这 些 软件 体积 庞大 .功能 过 多 .包罗万象 ,使 用 起 来 无 法 达到 快速 自如。 当然 ,可 以 下 载 一 
些 成 型 的 原型 设计 模板 来 实现 ,也 是 非常 方便 的 。 

这 里 介绍 两 款 软件 ,是 专 为 用 户 体 验 原 型 草图 设计 量 身 定做 的 计算 机 软件 。 不 但 使 用 
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图 4-15 Suki Kits 公司 生产 的 原型 设计 模板 套装 


入 a 


SS 











图 4-16 原型 设计 模板 套装 里 的 设计 绘图 纸 


方便 、 快 捷 , 而 且 效 果 亲 和 、 目 然 , 可 以 帮 我 们 避 开 手工 绘制 的 烦恼 而 完全 使 用 计算 机 来 完成 
原型 草图 的 绘制 。 首 先是 美国 Balsamiq 公司 的 Balsamiq Mockups( 如 图 4-17 所 示 ), 这 于 
软件 的 操作 非常 灵活 ,而 且 成 型 的 图 块 采 用 手绘 风格 ,制作 出 来 的 效果 厚重 而 自然 。 我 们 可 
以 下 载 不 同 应 用 平台 的 原型 图 形 插 件 来 完成 相应 的 设计 。 

男 一 款 软 件 是 The Omni Group 公司 的 OmniGraffle( 如 图 4-18 FEIR), BIE EI 
在 苹果 计算 机 上 运行 的 ,针对 10S 平台 应 用 的 原型 设计 软件 ,但 是 如 今 也 加 入 了 Andriod 和 
Windows Phone 平 台 的 原型 图 形 择 件 , 功 能 强大 ,效果 精美 清新 ,可 以 同时 针对 原型 草图 
和 中 保 真 原型 进行 设计 和 构思 。 
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图 4-17  Balsamiq 公司 的 Balsamiq Mockups 
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图 4-18 The Omni Group 公司 的 OmniGraffle 
上 述 工 具 既 可 以 帮助 你 避 开 手绘 的 困扰 ,也 可 以 为 你 的 绘图 缺陷 进行 弥补 ,同时 为 原型 


草图 设计 提供 了 更 多 的 选择 和 风格 。 我 们 建议 把 这 些 工 具 和 软件 与 手工 的 草图 相互 补充 ， 
既 不 完全 放弃 手绘 ,又 不 受 手绘 技能 的 限制 ,目标 是 尽快 把 日 己 的 想法 呈现 在 纸 面 上 。 尝 试 
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了 我 们 分 孚 的 这 些 经 验 , 相 信 读 者 已 经 能 够 把 目 己 的 创意 和 思路 绘制 出 来 , 变 成 一 张 张 的 草 
图 。 下 一 步 就 是 整理 好 草图 的 顺序 ,把 它们 关联 起 来 进行 初步 的 浏览 和 检测 。 


4.3 检验 分享 你 的 思考 结果 


原型 草图 的 产生 是 整个 移动 应 用 用 户 体 验 设计 至 关 重 要 的 一 步 , 它 标志 着 创意 、 构 思 阶 
段 的 基本 完成 ,将 进入 设计 的 布局 和 调整 阶段 。 那 么 在 这 关键 的 时 刻 ,我 们 要 表 下 心 来 调整 
思绪 ,用心 整理 一 下 我 们 的 构思 ,看 看 它 有 没有 继续 完善 和 修改 的 空间 。 具 体 的 做 法 ,是 要 
把 所 有 的 草图 按照 我 们 创意 和 设计 的 思路 溃 起 来 ,使 它们 成 为 流程 网 。 每 一 个 设计 师 和 都 有 
目 己 独特 的 一 父 开 发 流程 ,而 无 论 什 么 样 的 流程 和 方法 ,都 要 从 我 们 原型 草图 的 纸 面 排列 上 
开始 。 就 像 导 演 在 电影 开始 招 摄 之 前 , 先 要 把 剧本 内 容 夯 成 分 镜头 的 故事 板 , 因 此 ,我 们 要 
为 下 一 步 的 设计 工作 做 好 准备 ,必须 要 认真 做 好 应 用 程序 的 故事 板 。 


4.3.1 有 人 连 贵 ,有 情节 , 画 出 应 用 的 故事 板 


所 谓 的 故事 板 ,一 般 是 指 电影 或 者 动画 在 开拍 或 绘制 之 前 , 先 把 所 有 的 情节 分 成 不 同 的 
场景 ,再 把 场景 的 每 一 个 镜头 画面 像 连 环 画 或 者 漫画 一 样 快 速 绘制 在 草稿 纸 上 ,并 标注 出 镜 
头 的 运动 方式 .时 间 长 度 `. 对白 和 特效 等 ,以 此 来 检验 故事 的 衔接 是 否 连 贯 、 合 理 , 以 及 对 整 
个 拍摄 过 程 建 立 起 完整 的 视觉 概念 ,示例 图 如 图 4-19 所 示 。 应 用 程序 运行 和 使 用 的 过 程 也 
是 一 个 充满 了 场景 变换 和 情 市 的 过 程 ,同样 需要 检验 和 修订 。 所 以 ,在 开始 下 一 步 细 节 设 
计 之 前 ,我 们 要 把 原型 草图 整理 好 , 查 漏 补缺 ,把 所 有 的 界面 串 在 一 起 ,每 一 项 功能 的 每 一 个 
动作 都 不 要 漏 掉 ,真正 做 到 前 有 因 、 后 有 果 中间 的 过 程 有 条 理 。 

图 4-20 表现 的 是 51work6 团队 开发 的 “价格 线 ” 项 目的 原型 流程 草图 ,设计 团队 把 应 用 
程序 运行 中 的 每 一 个 界面 都 画 在 了 同一 张 图 纸 上 , 以 便 大 家 的 讨论 ,修改 和 下 一 步 的 相互 协 
作 。 有 了 这 张 图 纸 , 团 队 的 每 一 个 人 都 会 对 这 个 项 目 有 一 个 清晰 完整 的 认识 ,同时 ,也 保持 
了 相同 的 基本 愿景 ,为 之 后 的 工作 铺 平 了 道路 。 

这 样 一 来 ,我们 的 应 用 在 结构 .流程 和 运行 逻辑 上 就 基本 不 会 出 现 错误 了 ,当然 ,还 可 以 
通过 其 他 方法 进一步 去 把 握 和 体验 应 用 程序 的 设计 和 创意 是 否 合 理 。 针 对 “艺术 品 收 藏 ” 
应 用 的 用 户 体验 设计 ,我 们 也 把 自己 的 创意 和 设想 画 成 了 原型 草图 ,在 这 里 和 大 家 分 享 一 
下 。 主 要 是 为 这 一 部 分 内 容 和 概念 在 案例 上 进行 一 下 补充 和 落地 ( 见 图 4-21 和 图 4-22). 

我 们 大 体 的 设想 ,是 在 主页 面 上 把 应 用 内 容 的 几 个 大 的 分 类 设计 成 立体 标签 的 形式 。 
为 了 增强 交互 体验 ,我 们 把 可 点 击 的 区 域 安 排 在 界面 的 两 侧 , 这 样 比较 适合 拇指 的 点 击 和 划 
屏 , 在 第 5 昔 里 ,将 会 详细 阐述 交互 体验 中 移动 设备 与 人 体 之 间 的 关系 。 同 时 ,为 了 提高 视 
觉 上 的 吸引 力 ,把 标签 设计 得 比较 大 ,这 样 可 以 利用 艺术 作品 本 身 的 魅力 增强 界面 的 吸 
引力 。 
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图 4-19 广告 短片 的 分 镜头 故事 板 ( 图 片 由 李 兰 兰 创 作 并 提供 ) 
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图 4-21. “艺术 品 收藏 ”的 用 户 体验 设计 主页 面 的 原型 草图 
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图 4-22 “艺术 品 收藏 * 的 用 户 体 验 设计 作品 陈列 界面 原型 草图 





几 是 对 艺术 品 感 兴趣 的 人 , 神 应 该 对 画廊 .美术 馆 和 博物 馆 的 氛 于 感到 亲切 和 认同 , 因 
此 我 们 决定 把 界面 设计 成 画廊 陈列 的 视觉 效果 。 这 样 的 安排 也 与 105 分 屏 式 的 平 铺 导 航 
相同 ,只 要 进入 页 面 ,大 家 就 会 很 目 然 地 左右 划 屏 欣 帝 艺术 作品 , 束 好 像 漫 步 在 画廊 里 一 样 。 

不 过 对 于 每 幅 作品 的 操作 和 说 明 ,我 们 还 没有 一 个 非常 确定 的 设计 ,使 用 特定 按钮 来 激 
活 标 签 的 做 法 比较 简约 和 下 观 , 而 且 可 以 把 不 常用 的 按钮 藏 起 来 ,使 画面 更 加 何洁 和 纯粹 。 
同时 ,为 了 查找 方便 我 们 设计 了 索引 页 面 ,在 任何 情况 下 都 可 以 通过 右 下 角 的 按钮 激活 并 返 
器。 当然 了 ,这 个 大 体 的 设想 缺乏 细 市 ,下 一 步 我 就 要 通过 在 计算 机 上 制作 平面 或 可 交互 原 
型 来 完善 我 们 的 设计 。 


4.3.2 利用 原型 下 图 进行 可 用 性 测试 


最 简单 的 方法 ,就 是 利用 移动 设备 的 拍照 和 图 片 济 览 功能 (如 图 4-23 所 示 )。 第 1 革 提 
到 过 ,对 应 用 设计 进行 可 用 性 测试 是 非 稼 重要 的 步 枝 。 而 这 个 步骤 不 单单 是 针对 设计 的 中 
保 真 阶段 ,在 草图 阶段 我 们 就 可 以 对 应 用 进行 简单 的 可 用 性 测试 。 我 们 可 以 把 原型 草图 中 
的 每 一 个 界面 单独 拍照 ,之 后 使 用 照片 美化 应 用 对 照片 稍 加 调整 ,主要 是 把 四 个 边缘 裁 切 整 
齐 并 调整 一 下 党 度 和 对 比 度 ,使 图 片 清晰 完整 。 之 后 就 可 以 在 图 片 浏览 带 里 的 全 屏 模 式 下 
一 张 一 张 地 翻 看 浏览 ,是 不 是 感到 能 更 加 直观 地 体验 应 用 程序 运行 的 流程 ? 

由 于 和 直接 拍照 容易 受到 光线 .角度 和 镜头 人 硬件 的 限制 ,往往 招 出 来 的 照片 有 些 不 尽 如 人 
意 , 比 如 不 清晰 或 者 变形 ,因此 ,还 可 以 把 纸张 上 的 草图 利用 扫描 仪 输 入 计算 机 ,在 
Photoshop 里 稍 加 修饰 和 裁剪 , 编 好 顺序 存放 在 文件 夹 里 ,同步 到 移动 设备 里 用 图 片 浏览 功 
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图 4-23 利用 移动 设备 的 招 照 和 图 片 浏 览 功能 


能 翻 看 浏览 。 

如 有 果 沉 得 不 满足 ,还 可 以 尝试 利用 你 草图 的 扫描 文件 做 一 个 简易 的 、 可 进行 页 面 跳 转 的 
Flash 动画 来 体验 一 下 大 人 致 的 功能 、 导 航 和 布局 结构 。 如 果 你 具备 编程 能 力 或 者 你 团队 里 
的 程序 员 愿 意 帮 你 ,就 可 以 把 这 个 测试 文件 实现 得 更 加 完美 。 程 序 没 必 要 复杂 ,就 像 你 的 草 
图 一 样 粗 糙 , 图 片 和 文本 占 位 可 以 一 律 用 假 信息 ,只 要 能 点 击 按 钮 简单 翻动 就 足够 了 ,目的 
是 检验 你 的 布局 是 否 合理 ,控件 是 否 规范 ,导航 是 否 正 确 。 


4.3.3 JLA Hf 4s 7 m E 


原型 草图 是 表现 应 用 设计 交互 .控件 和 导航 方式 等 运行 状态 的 草图 形式 , 除 此 之 外 ,还 
有 其 他 几 种 与 移动 应 用 用 户 体验 设计 相关 的 草图 形式 ,虽然 没有 原型 草图 实用 ,但 在 一 些 特 
丈 情形 或 者 特殊 场合 下 还 是 非常 有 帮助 的 ,在 此 我 们 向 大 家 介绍 几 种 比较 实用 的 草图 形式 。 

1. 功能 概念 草图 

这 种 草 网 不 需要 对 界面 的 细节 和 布局 设计 进行 详细 的 描绘 ,只 针对 功能 的 特点 和 功能 
所 达到 的 效果 进行 图 解 , 大 多 表现 功能 运行 时 产生 的 动作 、 规 律 和 状态 。 图 4-24 表现 的 是 
olwork6 团队 研发 的 一 款 面 癌 学 龄 前 儿童 配色 涂鸦 的 游戏 应 用 “SaPaint” 的 功能 概念 示意 
草图 ,其 中 运用 舌头 加 文字 的 方法 表现 了 弹出 和 收回 的 动画 效果 。 

2. 使 用 情景 草图 

这 种 草图 一 般 有 用益 画 的 形式 ,表现 使 用 者 使 用 应 用 程序 时 的 情景 ,以 此 来 分 析 用 户 的 需 
求 和 功能 点 的 设置 ,适合 在 会 议 上 或 者 与 用 户 沟通 的 时 候 展 示 , 既 展现 了 应 用 的 优点 ,又 有 
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图 4-24 51work6 团队 人 研发 的 “SaPaint” 项 目 功 能 概念 示意 草图 
利于 在 团队 内 部 达成 共识 。 情 市 一 般 不 宜 太 复杂 ,最 好 能 在 四 幅 图 内 把 事情 说 明 。 图 4-25 
是 olwork6 团队 对 他 们 的 应 用 “价格 线 ” 进 行 用 户 需 求 分 析 时 设计 的 使 用 情景 草图 ,关键 是 
要 创造 一 个 婚典 型 又 合 适 的 漫画 形象 ,同时 要 准确 地 表现 情形 和 环境 。 





图 4-25 51work6 团队 为 “价格 线 ” 项 目 设 计 的 使 用 情景 草图 
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3. 应 用 方式 图 解 

这 种 草 岁 有 点 像 使 用 应 用 的 说 明 书 ,对 应 用 的 使 用 方法 (包括 细节 操作 ) 进 行 岁 解 , 包 括 
使 用 应 用 程序 时 的 触摸 手势 ,如 何 应 对 应 用 程序 做 出 的 反应 以 及 如 何 对 应 用 进行 合理 的 设 
置 等 。 

当然 ,应 用 设计 的 章 网 形式 绝 不 仅仅 这 几 种 ,应 该 说 数不胜数 ,而 大 多 取 雇 于 设计 师 对 
应 用 的 设计 目标 和 要 求 , 以 及 自身 对 事物 的 表现 能 力 和 想象 力 。 不 过 ,草图 制作 得 再 细致 、 
再 丰 宦 也 只 是 草图 , 它 只 能 概括 地 表现 出 你 的 创意 想法 和 运行 思路 ,真正 进入 到 导航 方式 、 
控件 设置 和 界面 样式 等 细 市 的 原型 设计 时 ,就 不 是 那么 随意 和 概括 了 ,需要 注意 很 多 的 规 
范 , 也 会 遇 到 很 多 的 问题 。 因 此 ,我 们 必须 对 移动 应 用 的 设计 规则 、 要 求 和 特点 有 一 个 全 面 
的 认识 。 在 接 下 来 的 内 容 里 ,我 们 将 为 大 家 阐述 各 个 平台 在 交互 方式 ,布局 结构 ,以 及 导航 
方式 和 空间 安排 上 的 规范 和 要 求 , 这 是 成 为 专业 成熟 的 用 户 体 验 设 计 师 的 必 经 之 路 。 


























原型 草图 的 完成 标志 看 完成 了 移动 应 用 设计 的 初级 阶段 ,也 就 是 低 保 真 阶段 ,时 然 它 帮 





助 我 们 确定 了 应 用 的 主体 功能 、 整 体 框架 和 页 面 的 层级 关系 ,但 是 它 太 概 括 、 太 粗 矿 、 没 有 细 
节 , 我 们 只 能 在 团队 内 部 对 它 进行 位 单 的 可 用 性 测试 。 如 果 想 把 我 们 的 创意 和 设计 的 结 
展示 给 老板 、 甲 方 或 者 用 户 ,就 必须 制作 一 个 高 保 真 的 原型 ,使 大 家 能 够 全 面 、 清 晰 地 看 到 你 
的 设计 结果 在 设备 上 运行 时 的 效果 。 展 示 之 后 ,会 有 反复 的 修改 直到 设计 方案 的 成 熟 ,设计 
的 过 程 就 是 不 断 迭 代 曙 旋 上 升 的 过 程 。 

因此 ,好 原型 设计 工具 成 为 了 设计 师 寻 找 的 日 标 。 单 纯 的 纸 面 原型 或 图 形 原 型 缺少 交 
互 能 力 ,无 法 进行 针对 用 户 的 可 用 性 测试 。 本 半 将 向 大 家 介绍 Xcode 工具 ,可 以 帮助 设计 
师 完 成 可 交互 的 蜗 保 真 原型 设计 。 


5.1 用 计算 机 完成 原型 设计 


在 我 们 进行 移动 产品 设计 的 过 程 中 ,根据 项 目的 进度 和 需求 ,要 把 产品 原型 制作 成 纸 面 
的 原型 草 岁 .平面 的 图 像 文件 以 及 市 有 交互 效果 的 可 执行 文件 。 而 高 保 真 的 产品 原型 可 以 
帮助 我 们 进行 产品 方案 展示 、 可 用 性 测试 和 修改 、 与 甲 方 或 用 户 沟通 以 及 与 开发 人 员 
沟通 。 

完成 了 原型 草图 的 设计 后 ,我 们 现在 要 打开 计算 机 ,开始 进一步 地 完成 我 们 的 电子 
原型 。 


5.1.1 平面 图 像 原型 的 实现 


一 般 来 说 ,我 们 在 利用 计算 机 进行 原型 设计 的 第 一 步 , 就 是 把 手绘 的 原型 草图 制作 成 图 
形 文件 。 这 个 过 程 中 需要 使 用 各 种 图 形 工 具 把 界面 的 色彩 搭配 、 图 形 细 广 和 字体 样式 尽 可 
能 地 实现 出 来 ,通常 使 用 Photoshop 或 者 Illustrator 等 平面 设计 软件 就 可 以 完成 ( 见 图 5-1)。 

在 完成 平面 图 像 原 型 的 过 程 中 还 有 些 需 要 注意 的 细 市 。 前 先是 要 做 成 原 大 ,文件 尺寸 
要 与 成 品 尺 寸 , 也 就 是 移动 设备 屏 磊 的 比例 和 像素 尺寸 一 样 大 。 这 样 可 以 方便 我 们 把 图 像 
文件 复制 到 移动 设备 的 相册 里 进行 更 加 直观 的 把 握 , 同 时 为 我 们 下 一 步 制作 可 交互 的 原型 
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图 5-1 使 用 Photoshop 完成 平面 图 像 原型 


文件 提供 便利 。 很 多 设计 师 在 实现 局 平 化 设计 效果 时 认为 Illustrator 能 够 更 加 方便 和 下 
观 ,那么 在 建立 文件 的 时 候 也 要 注意 文件 的 长 宽 比 例 和 色彩 模式 。 同 时 ,如 果 使 用 标准 控件 
或 元 素 ,我 们 不 必 去 亲自 动手 临 拿 OS 原生 应 用 的 界面 ,只 需要 下 载 iOS 平台 相应 版 本 的 
PSD 格式 或 AI 格式 的 "GUI 模板 "就 可 以 了 ,里 面包 括 了 108 几乎 所 有 标准 控件 和 图 形 元 
素 。“GUI 模板 "还 有 助 于 我 们 对 目 己 的 个 性 图 标 和 界面 元 系 设 计 进 行规 范 和 比例 参考 。 


5.1.2. 可 交互 原型 的 实现 


在 进行 产品 演示 和 可 用 性 测试 的 时 候 , 价 单 的 平面 图 像 文件 很 难 让 用 户 或 甲 方 下 观 地 
了 解 你 的 创意 思路 和 设计 框架 ,仅仅 靠 画面 之 间 的 排序 和 页 面 跳 转 无 法 展示 复杂 多 样 的 交 
互 方式 。 因 此 ,在 完成 了 细致 而 完善 的 图 像 界 面 原 型 之 后 ,可 以 依 助 一 些 工具 ,把 平面 图 像 
原型 实现 成 一 个 可 交互 的 执行 文件 ,从 而 直观 地 展示 你 的 应 用 结构 和 操作 逻辑 ,这 就 是 可 交 
互 原型 。 

实现 可 交互 原型 有 两 种 形式 ,一 个 是 计算 机 端的 可 交互 原型 ,只 能 在 计算 机 屏幕 上 进行 
演示 ; 另 一 种 是 移动 设备 端的 可 交互 原型 ,可 以 直接 在 移动 设备 上 看 到 应 用 实现 后 的 最 终 
效 末 ,如 图 5-2 所 示 。 当 然 , 相 比 之 下 能 够 直接 在 移动 设备 上 运行 的 可 交互 原型 会 更 加 地 有 利 
于 我 们 的 产品 演示 和 可 用 性 测试 。 下 面 我 们 分 别 介绍 儿 球 针对 不 同形 式 可 交互 原型 的 工具 ， 

计算 机 端的 可 交互 原型 工具 推荐 使 用 Axure RP 和 UIDesigner。 

Axure RP( 见 图 5-3) 是 美国 Axure Software Solution 公司 旗舰 产品 ,是 一 个 专业 的 快 











第 5 章 ”使 用 Xcode 工具 进行 原型 设计 > 
Ça urs s zh ` 
(a) 计算 机 端的 可 交互 原型 (b) 移动 设备 冰 的 可 交互 原型 
图 5-2. ”计算 机 端的 可 交互 原型 和 移动 设备 端的 可 交互 原型 
速 原型 设计 工具 ,在 定义 需求 和 规格 、 设 计 功 能 和 界面 方面 ,能 够 让 设计 师 快 速 创建 应 用 软 


件 或 Web 网 站 的 线 框图 .流程 图 .原型 和 规格 说 明文 档 。 作 为 专门 的 原型 设计 工具 , 它 的 特 


点 是 快速 





` 局 效 。 它 同时 支持 多 人 协作 设计 和 版 本 控制 管理 ,是 一 球 非 第 强大 的 可 交互 原型 
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图 5-3 使 用 Axure RP 进行 计算 机 端的 可 交互 原型 设计 


UIDesigner( 见 图 5-4) 由 腾讯 CDC 设计 和 研发 , 专 为 交互 设计 师 、 视 沉 设 计 师 精心 打 


Xi. TRADE 


是 控件 类 型 丰富 、 可 以 自 定义 控件 样式 和 创建 个 性 化 控件 ,满足 不 同 平台 的 设计 需 
求 。 不 过 截至 本 书 成 稿 ,UIDesigner 还 


不 没有 推出 mac 版 。 
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图 5-4 Windows 版 的 UlDesigner 工具 


当然 除了 上 述 两 款 工 具 外 还 可 以 使 用 Flash 和 Fireworks 完成 计算 机 端的 可 交互 原 
型 ,但 是 这 两 款 工具 需要 一 定 的 编程 或 代码 基础 ,而 且 修 改 起 来 比较 麻烦 ,制作 周期 很 长 。 
移动 设备 端的 可 交互 原型 工具 我 们 问 大 家 推荐 Pop 和 Grafio Lite( 风 图 5-5)。 





图 5-5 ”iOS 平 台 的 “Pop” 和 “Grafio Lite" 
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POP 应 用 非 篆 轻 马 简单 ,用 手机 拍 下 手绘 草图 S R DC SC sr. B n] LAE iPhone 上 演示 
原型 ,并 且 它 内 和 瞬 的 交互 动作 如 侧 滑 、 展 开 、 消失 等 , 即 可 满足 一 般 的 动态 演示 需要 。Grafio 
Lite MH VJ i iPhone 控件 库 , 可 导入 设计 稿 图 片 ,在 产品 构思 和 创意 阶段 使 用 非常 方便 。 
不 过 大 家 也 发 现 了 ,这 两 球 应 用 主要 是 针对 移动 产品 在 构思 和 创意 阶段 的 原型 草图 进行 可 
交互 原型 实现 的 ,而 实现 真正 的 高 保 真 可 交互 原型 ,它们 的 功能 就 显得 有 些 人 简单 和 粗略 。 
此 , 想 要 真正 地 实现 10S 平 台 移 动 设备 端的 可 交互 原型 ,我 们 的 方法 是 使 用 芋 果 计算 机 专 
用 的 Xcode 工具 。 本 章 后 续 将 由 浅 入 深 地 为 大 家 介绍 使 用 Xcode 工具 实现 移动 设备 端的 
可 交互 原型 的 方法 。 


5.1.3 原型 的 可 用 性 测试 


现在 ,可 以 通过 前 面 知识 的 积累 ,利用 iOS 平 台 的 规范 ,运用 各 种 计算 机 图 形 软 件 制作 
出 一 套 真正 的 移动 应 用 原型 文件 了 ,而且 完 全 可 以 达到 送 交 程序 员 进 行 实现 的 水 准 。 但 是 
由 于 缺乏 与 用 户 和 编程 人 员 的 沟通 ,这 个 原型 还 不 能 作为 设计 的 最 终结 朱 ,也 许 存 在 很 多 的 
错误 和 不 合理 环节 ,需要 不 断 地 发 现 和 修改 。 因 此 ,要 利用 原型 进行 应 用 的 可 用 性 测试 。 

第 1 章 曾 癌 大 家 介绍 过 可 用 性 测试 ,就 是 把 设计 好 的 原型 文件 输入 到 移动 设备 里 进行 
操作 尝试 或 交互 体验 。 人 简单 的 方法 和 原型 草图 的 测试 一 样 , 就 是 把 每 个 页 面 的 平面 图 像 原 
型 存 成 JPEG 格式 , 排 好 顺序 放 到 手机 或 平板 电脑 的 相册 里 ,左右 划 屏 来 模仿 页 面 的 跳 转 ， 
体会 应 用 程序 的 操作 流程 .界面 效果 以 及 布局 的 合理 性 。 但 是 这 样 的 测试 并 不 能 检验 导航 
和 页 面 跳 转 的 合理 性 ,以 及 程序 整体 框架 设计 的 诸多 细 市 。 因 此 ,更 好 的 方法 还 是 制作 可 交 
互 原型 进行 可 用 性 测试 。 利 用 Xcoed 做 成 一 个 可 以 通过 点 击 按钮 实现 页 面 跳 转 的 人 简易 程 
序 , 找 来 一 些 有 代表 性 的 用 户 ,对 我 们 的 应 用 原型 进行 典型 操作 和 尝试 ,我 们 和 开发 人 员 一 
起 在 一 劳 观察 、 聆 听 \ 做 记录 ,最 好 能 录像 ,这 样 可 以 反复 观察 和 撕 摩 。 

在 测试 过 程 中 ,一 定 要 注意 测试 者 的 每 一 个 操作 细 市 ,认真 记录 他 们 的 每 一 条 意见 和 建 
议 , 包 括 人 体 工程 学 方面 的 舒适 度 、 布 局 的 合理 性 和 点 击 范围 的 精确 性 。 而 且 , 要 敢于 面 对 
现实 ,不惜 推翻 重 来 ,甚至 从 起 步 阶 段 进 行 调整 。 事 实 上 ,任何 项 目 痢 不 可 能 一 帆 风 顺 , 这 对 
于 我 们 来 说 已 经 算是 家 和 背 便 饭 了 。 当 然 , 经 验 和 阅历 就 是 这 样 积 素 起 来 的 ,所 以 绝 不 会 得 不 
ERE 

在 “艺术 品 收藏 "应 用 项 目 中 ,我 们 制作 了 一 套 原 型 ,如 图 5-6 所 示 。 由 于 这 个 应 用 的 初 
衷 就 需要 比较 个 性 化 ,所 以 在 原型 设计 上 并 没有 使 用 太 多 规范 的 元 素 。 

这 个 项 目 是 针对 iOS 平 台 的 iPad 设 备 而 开发 的 ,并 且 只 在 横 屏 模式 下 运行 。 在 原型 制 
作 过 程 中 ,我 们 进行 了 规范 化 和 人 体 工 程 学 上 的 调整 。 从 特性 上 来 说 , 它 既 是 一 款 图 片 浏览 
工具 ,又 是 一 本 电子 杂志 ,所 以 功能 比较 简单 ,采用 了 列表 式 布 局 作为 主页 面 的 布局 ,作品 浏 
览 采 用 平 铺 导航 。 该 应 用 的 特点 和 优势 主要 在 于 内 容 信息 和 视觉 元 素 , 所 以 ,我 们 必须 在 个 
性 化 设计 中 投入 更 多 的 精力 。 可 用 性 测试 过 程 中 ,我 们 分 别 找到 了 艺术 爱好 者 .收藏 者 以 及 
画家 本 人 共同 参与 ,最 终归 纳 出 了 这 样 一 些 咪 行 解决 的 问题 : 

主页 布局 死板 ,信息 显示 不 完整 ; 
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图 5-6 iPad 上 的 “艺术 品 收 藏 * 应 用 原型 文件 


m 控件 位 置 安排 散乱 ,操作 不 顺手 ; 

m 作品 信息 人 处理 死板 , 且 破 坏 了 作品 的 完整 性 ; 

m 没 能 突出 画廊 的 主题 ,没有 身 临 其 境 的 感觉 。 

经 过 反复 推敲 和 修改 ,应 用 的 设计 结果 最 终 还 是 比较 让 用 户 和 甲 方 满意 的 。( 见 图 5-7) 

我 们 把 5 个 列表 项 目 设计 成 了 闭 放 在 一 起 的 书签 ,通过 动画 可 以 让 每 一 个 书签 交 蔡 前 
置 , 并 统一 通过 一 个 固定 的 按钮 进行 界面 跳 转 , 进 入 下 一 级 页 面 。 在 色调 上 ,我 们 为 了 最 大 
限度 地 突出 作品 本 号 的 色彩 魅力 ,一 律 选择 白色 和 淡 灰 色 作 为 主 色 调 , 衬 托 作 品 本 和 号 的 丰富 
色彩 。 该 应 用 的 陈列 页 面 如 图 5-8 所 示 。 

对 于 作品 信息 的 处 理 , 我 们 突 发 奇想 地 把 画面 反 转 过 来 ,露出 了 作品 背面 的 木 架 和 亚麻 
布 ,这 下 文字 和 图 标 都 有 地 方 放 了 。 不 过 ,为 了 使 用 户 不 会 忘记 自己 翻转 的 是 哪 一 幅 作 品 ， 
我 们 必须 在 背面 放置 一 张 作 品 的 缩 略 图 ,就 像 不 干 腕 贴纸 一 样 。 同 时 ,为 了 加 强 画 廊 身 临 其 
境 的 感 党 ,我 们 隐藏 了 界面 上 所 有 的 按钮 和 元 素 , 只 有 通过 单 击 画面 ,才能 从 下 部 弹出 工具 
栏 ( 如 图 5-9 所 示 )。 这 个 应 用 的 最 终 效 有 果 我 们 可 以 通过 访问 App Store 搜索 “Yangart” 下 
载 到 iPad 上 来 体验 ,当然 ,这 是 一 球 免 费 的 应 用 。 
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图 5-7 iPad 上 的 “艺术 品 收 藏 " 应 用 主页 面 





图 5-8 iPad 上 的 “艺术 品 收 藏 > 应 用 陈列 页 面 





图 5-9 _iPad 上 的 “艺术 品 收藏 ”应 用 陈列 页 面 工 具 栏 和 索引 页 面 
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最 后 是 索引 页 面 ,我 们 把 所 有 的 缩 略图 制作 成 老式 约 灯 毛 的 效果 ,同时 进行 了 细致 的 排 
列 , 这 里 工具 栏 同 样 被 隐藏 起 来 。 对 于 整个 应 用 的 界面 设计 ,我 们 亲人 循 的 理念 就 是 简约 、 大 
气 、 细 致 和 流畅 的 动态 交互 ,同时 ,突出 信息 主体 , 绝 不 喧 宾 夺 主 。 

通过 这 个 实例 我 们 可 以 体会 到 ,可 用 性 测试 不 但 能 够 解决 设计 者 容易 忽略 的 关键 性 细 
节 , 还 可 以 推动 设计 不 断 的 成 就 和 完善 ,设计 的 过 程 是 一 个 螺旋 迭代 的 过 程 , 所 有 的 工作 环 
节 都 不 可 能 一 帆 风 硕 , 因 此 在 应 用 设计 过 程 中 要 合理 地 利用 可 用 性 测试 得 到 可 以 最 终 交 付 
开发 人 员 的 高 保 真 原型 。 下 面 介绍 实现 高 保 真 原型 的 最 佳 选择 工具 一 一 Xcode。 














5.2 原型 设计 利 颖 一 一 Xcode 





Xcode 开发 工具 原本 是 苹果 公司 给 开发 人 员 使 用 进行 Mac OS X 和 iOS 应 用 集成 开发 
HTH. RAE] F 2008 年 3 月 6 日 发 布 了 iPhone 和 iPod Touch 的 应 用 程序 开发 包 。 
这 里 包括 了 Xcode 开发 工具 .iPhone SDK 和 iPhone 手机 模拟 器 。 第 一 个 Beta 版 本 是 
iPhone SDK 1. 2b1 (build 5A147p) , 它 在 发 布 后 立即 就 能 够 使 用 ,但 是 同时 推出 的 A pp 
Store 所 需要 的 固件 更 新 直到 2008 年 7 月 11 日 才 发 布 。 编 写本 书 时 ,iOS SDK 7 版 本 已 经 
发 布 。 

iOS 开发 工具 最 主要 就 是 Xcode, HM Xcode 3. 1 发布 以 后 ,Xcode 就 成 为 『 iPhone 
软件 开发 工具 包 的 开发 环境 。Xcode 可 以 开发 Mac OS X 和 iOS 应 用 程序 ,其 版 本 是 与 
SDK 相互 对 应 的 ,例如 Xcode3. 2.5 5E iOS SDK 4. 2 对 应 ,Xcode 4. 1 5 iOS SDK 4.3 对 
应 ,Xcode 4. 2 与 10S SDK 5 对 应 ,Xcode 4. 5 与 iOS SDK 6 对 应 ,Xcode5 与 iOS SDK 7 
对 应 。 

Xcode 4. 1 之 前 还 有 一 个 配套 使 用 的 工具 Interface Builder, 它 是 Xcode 套件 的 一 部 分 ， 
用 来 设计 窗 体 和 视图 ,通过 它 可 以 “所 见 即 所 得 ”地 拖 忠 控件 并 定义 事件 等 ,其 数据 以 XML 
的 形式 被 存储 在 . xib 文件 中 。 在 Xcode 4. 1 之 后 ,Interface Builder 成 为 了 Xcode 的 一 部 
分 ,与 Xcode 集成 在 一 起 。 


5.2.1 Xcode ZI MAI 


Xcode 必须 安装 在 Mac OS X 系统 上 ,Xcode 的 版 本 与 Mae OS X 系统 版 本 有 着 严格 的 
对 应 关系 。Xcode 5 要 求 Mac OS X 10.8 以 上 上。 安装 可 以 通过 Mae OS X 的 Dock 中 App 
Store 国 应 用 启动 App Store, 如 图 5-10 所 示 。 如 果 需 要 安装 软件 或 查询 软件 则 需要 用 户 
登录 ,这 个 用 户 就 是 App ID, 弹 出 的 登录 对 话 框 如 果 5-11 所 示 。 如 果 你 没有 登录 App ID 
可 以 单 击 “ 创 建 App ID” 按 钮 创建 。 

之 后 ,可 以 在 右上 角 的 搜索 栏 中 输入 要 搜索 的 软件 或 工具 名 称 “Xcode” 关 键 字 ,搜索 结 
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图 5-10 应 用 局 动 App Store 界面 


登录 App Store 来 下 载 。 


HRGA Apple ID. i8Zzix V RR. Sin iTunes Store 或 iCloud， 您 就 有 
Apple ID. $05: 2:94 Apple ID， 请 单 击 " 创 建 Apple ID". 


Apple ID 密码 $T? 








(2) | 创建 Apple ID | | 取消 || #3 





图 5-11 App Store 用 户 登 录 界 面 


果 如 图 5-12 所 示 。 
单 击 Xcode 进入 Xcode 信息 介绍 界面 ,如 图 5-13 所 示 , 单 击 Install 按钮 开始 安装 。 








H Xcode 非常 简单 ,事实 上 在 Mac OS X 中 应 用 程序 只 是 需要 和 直接 删除 就 可 以 了 。 
如 图 5-14 所 示 打 开 应 用 程序 ,右键 选择 Xcode 弹出 某 单 ,选择 “ 移 到 废 纸 委 "删除 Xcode 应 
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图 5-12 搜索 Xcode 工具 


Xcode 


Xcode provides everything developert need to create great applications for Mac, iPhone, 
and iPad. Xcode has unified user interface design, coding. testing. and debugging ali 
within à single window, The Xcode IDE analyzes the detalls of your project to identify 
mistakes in both syntax and logic. it can even help fix your code for you. - Appio Wet site 
(T 

What's New in Version 5.0 PLC 
+ Includes SDKs for OS X 10.8 Mountain Lion and iOS 7. 
+ LLVM compiler builds 64-bit apps for IOS 7... 


App Lemie Agreement 
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Version: 5,0 
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图 5-13 Xcode 安装 
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Open File in BBEdit 


图 5-14 Xcode HI% 


5.2.2 Xcode 界面 
打开 Xcode 5 工具 ,看 到 的 主 界面 如 图 5-15 所 示 。 














| 总 rima = Qa 











图 5-15 Xcode 工具 主 界面 
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界面 主要 分 成 如 下 6 个 区 域 : 

中 号 区 域 是 工具 栏 ,其 中 的 按钮 可 以 完成 大 部 分 工作 。 

号 区 域 是 导航 栏 , 主 要 是 对 工作 空间 中 的 内 容 进行 导航 。 

(号 区 域 是 故事 板 中 的 场景 (Scene) 视 图 ,每 一 个 创建 就 是 一 个 新 的 视图 控制 带 , 视 图 
控制 硕 场 景 中 包含 了 一 些 视图 或 控件 。 

由 号 区 域 是 界面 设计 区 域 , 我 们 可 以 在 这 个 界面 中 拖 卡 控件 , 摆 放 控件 的 位 置 和 大 小 。 
在 设计 界面 区 域 的 下 部 还 有 很 多 按钮 ,如 图 5-16 所 示 。 

显示 /隐藏 场景 视图 
iPhone 5/iPhone 界 面 切换 
控件 布局 工具 栏 缩放 视图 工具 栏 


Emela] [Qsid] 


图 5-16 界面 设计 中 的 工具 栏 

















号 区 域 是 检查 带 窗 口 ,其 中 包含 了 6 个 检查 带 , 如 图 5-17 所 示 , 其 中 作为 设计 师 经 常 
使 用 的 是 属性 检查 入 和 矿 才 检查 天 。 





吕 示 文件 检查 器 
快速 显示 帮助 检查 器 
最 示 标 识 检查 需 
tb I E FS fr a 
显示 尺寸 检查 器 


| 星 示 连接 检查 器 
DDE EPSO 








图 5-17 Xcode L.H.P B fg A ss 








© 号 区 域 是 库 窗口 ,其 中 第 3 个 按钮 D 是 对 和 象 库 窗口 , 它 提供 了 一 些 105 的 标准 控 
TF ,我 们 可 以 拖 鼻 这 些 控件 到 设计 窗口 进行 设计 。 


5.3 创建 工程 


在 学 习 之 初 , 我 们 有 必要 对 使 用 Xcode 创建 10S 工程 做 一 个 整体 概览 ,我 们 通过 创建 
一 个 基于 故事 板 的 “HelloWorld”iPhone 应 用 来 实现 ,通过 这 个 实例 将 详细 曾 述 操作 过 程 
中 涉及 的 知识 点 。 

“HelloWorld” 应 用 实现 了 在 界面 上 展示 字符 串 Hello World( 效 果 如 图 5-18 所 示 ) ,其 
中 主要 包含 Label( 标 签 控 件 )。 

启动 Xcode ,选择 File New-Project 菜单 ,在 打开 的 Choose a template for your new 
project 界面 中 ,选择 Single View Application 工程 模板 (如 图 5-19 所 示 )。 

iOS 工程 模板 分 为 325. Application; Framework & Library 和 其 他 。 下 面 详细 介绍 一 下 。 
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Hello World 





图 5-18 “Hello World” 的 iPhone 界面 


Choose a template for your new project 


Tabbed Application Utility Application 


This template provides a starting point for an application that uses a single view. It provides a 
view controller to manage the view, and a storyboard or nib file that contains the view. 





图 5-19 选择 工程 模板 
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Application 类 型 可 以 创建 iOS 应 用 程序 ,我 们 大 部 分 的 开发 工作 都 是 从 这 里 开始 的 。 
该 类 共 包 含 7 个 模板 ,具体 如 下 所 示 。 
m Master-Detail Application: 可 以 构建 树 形 结构 导航 模式 的 应 用 ,生成 代码 中 包含 了 
导航 控制 右 、 表 视图 控制 希 等 。 
m OpenGL Game: 可 以 构建 基于 OpenGL ES 的 游戏 应 用 。 
m Page-Based Application: 可 以 构建 类 似 于 电子 书 效果 的 应 用 ,这 是 一 种 平 铺 导 航 。 
m Single View Application: 可 以 构建 简单 的 单个 视图 应 用 。 
m Tabbed Application: 可 以 构建 标签 导航 模式 的 应 用 ,生成 的 代码 中 包含 了 标签 控制 
i8 DART A. 
m Utility Application: AJ LATA Sz H 728 B Jj HERE FE «EL IE RP A N AS 8 hl i E 
4I Ps] et hl s RT LAE E ho Æ iPhone 设备 中 子 视图 以 模 态 方式 呈现 ,在 iPad ix 
备 中 子 视图 以 Popover ££ zl JE RE M. 
m Empty Application: 可 以 构建 一 个 空 应 用 程序 ,需要 我 们 上 自己 添加 视图 等 对 象 。 该 
模板 很 少 使 用 。 
m SpriteKit Game; 可 以 构建 基于 SpriteKit 的 游戏 应 用 。 
根据 需要 选用 不 同 的 工程 模板 ,可 以 大 大 减少 工作 量 。 对 于 设计 师 我 们 主要 使 用 
Master-Detail Application, Single View Application, Tabbed Application 和 Utility 























Application 等 模板 。 
此 外 还 有 Framework & Library 和 其 他 两 个 模板 ,这 些 模板 对 于 设计 师 来 说 基本 不 
使 用 。 


然后 单 击 Next 按钮 ,随即 出 现 图 5-20 所 示 的 界面 。 
这 里 需要 按照 提示 并 结合 自己 的 实际 情况 和 需要 输入 相关 内 容 。 下 面 人 简要 说 明 
图 5-20 中 的 选项 。 
B Product Name: 工程 名 称 。 
W Organization Name: 组 织 名 称 。 
m Company Identifier: 公司 标识 (很 重要 )。 一 般 是 将 公司 的 域名 倒 过 来 输入 进去 (如 
com. 51work6) ,这 类 似 于 Java 中 的 包 命 名 。 
m Bundle Identifier: 绑 标 识 符 (很 重要 )。 该 标识 符 由 Product Name + Company 
Identifier 构成 。 因 为 在 App Store 发 布 应 用 的 时 候 会 用 到 它 ,所 以 它 的 命名 不 可 重复 。 
B Class Prefix: 类 的 前 缀 。 为 生成 的 类 加 前 缀 (如 XZ Y ViewController), 
B Devices: 选择 设备 。 可 以 构建 基于 iPhone 或 iPad 的 工程 ,也 可 以 构建 通用 工程 。 
通用 工程 是 指 一 个 工程 可 以 同时 适应 iPhone 和 iPad, 不 论 在 iPhone 上 还 是 iPad 上 
都 可 以 正常 运行 。 
设置 完 相 关 的 工程 选项 后 , 单 击 Next 按钮 ,进入 下 一 级 界面 。 根 据 提 示 选 择 存放 文件 
的 位 置 , 然 后 单 击 Create 按钮 ,进入 操作 界面 ,在 左 侧 的 导航 栏 中 选择 Main Storyboard 将 
出 现 如 图 5-21 所 示 的 界面 。 
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Choose options for your new project 


Product Name 
— ne 
| Company Identifier | com.51work6 | 


Bundle identifier com. 51work6. HelloWorld 





图 5-20 ”新 工程 中 的 选项 





-— EE — mm - , 
Helloworid- Ready | Today at 17-125 A1 
Z.p m « » [D hHeloword > D Hellow.. > É manst. Msinst Bi View Co.. Qi View Controller |_| View 
* E View Controller Scene 















| 
mE 
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图 5-21 新 创建 的 工程 
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在 右 下 角 的 对 象 库 中 选择 Label( 标 签 ) 控 件 , 将 其 拖 忠 到 设计 视图 上 并 调整 其 位 置 ,如 
图 5-22 所 示 。 双 击 标 签 控 件 , 使 其 处 于 编辑 状态 (也 可 以 通过 控件 的 属性 来 设置 ) ,在 其 中 
输入 Hello World, 如 图 5-23 所 示 。 至 此 ,整个 工程 创建 完毕 。 











azaoa 











MelloWne id 
"Errores 05210 
* : 











图 5-23 ”修改 标签 内 容 
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通过 单 击 工具 栏 左边 Run Be 按 钮 (如 图 5-24), 即 可 打开 iPhone 模拟 器 看 到 运行 结果 
CILE 5-25)。 在 run 按钮 右 侧 有 一 个 10S Device 选项 ,可 以 对 模拟 融 的 形势 进行 选择 ,其 
中 iOS Device 是 在 真 机 上 演示 ,iOS Simulator 是 在 计算 机 模拟 器 上 演示 ,里 面 又 分 为 : 
iPhone 带 有 真 机 的 边框 ,效果 真实 ; iPhone(Retina3. 5-inch) 和 iPhone(Retina4-inch) 分 别 
是 iPhone 手机 3. 5 英才 屏 和 4 英寸 屏 的 演示 效果 ,但 是 不 带 真 机 边框 。 目 前 ,我 们 只 能 选 
择 在 计算 机 模拟 硕 上 运行 结果 ,进入 模拟 硕 后 ,我 们 可 以 通过 沫 单 关 闭 或 对 模拟 硕 的 显示 比 
例 进行 调整 。 














eoo eoo 
p MI | A helloworld > Bl ios Device p m | Hellowor v B ios Device L 
EGO S Ån- 
izaA 0 zz »Pa l 4 ne i mooaA e: ell 
g> epe ION SDK 7.0 "B te SDK 7.0 
BI out: E. RA 7 TE iPhone (Retina 3.5-inch) 
v, .HelloWworld v, HelloWorld Ph Dinha d dd 
hl AppDelegate.h h! AppDelegate.h "M iPhone (Retina 4-inc 
m| AppDelegate.m m| AppDelegate.m — ^ wore Simulators.. 


h) ViewController.h h) ViewController.h 
m, ViewController.m m| ViewController.m 





图 5-24 打开 和 模拟 豆 运 行 结 来 





PE ^ a uA Dai 
muc -u - gone © 
^. HelioWorid Type 
= 2 targets, (05 $0X Main. Storyooarc 

"elloworg Default - Interface Bu 
hi ApoDelegate.^ 
m| ApcOtlegata.m 一 
T=> 
ENN"L.-L Base.laro 
h) VvewController.h Mair 
ni NN h /Users/mac/Downloaci / 
code /ch / 
(oo mages.scasseti HelloWorld /Rase Iproj/ 
b L Sugparting Files Main storyooard 7 
* helloWoridTesti 
ider Documenmi 
* Frameworks HelloWorld 
4— i^; Default (5.01 
HelloWorld 
| 
ai fasso 
- - - 


图 5-25 iPhone 模拟 豆 运 行 状 态 


这 样 , 在 没有 输入 一 行 代码 的 情况 下 ,就 已 经 利用 Xcode 工具 的 Single View 
Application 模板 创建 了 一 个 工程 ,并 成 功 运 行 ,Xcode 功能 之 强大 可 见 一 斑 。 
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5.4 属性 检查 应 


作为 设计 师 ,我们 会 经 各 使 用 到 属性 检查 条 ,下 面 重 点 介绍 一 下 属性 检查 条。 属性 检查 
船 是 用 来 设置 控件 和 视图 的 属性 的 ,选中 设计 视图 中 的 HelloWorld f£ fF Jm P'E fy A d 14 
钮 埋 ' ,打开 属性 检查 。 属 性 检查 带 包 括 Label 和 View 两 个 组 ( 见 图 5-26) 。 


[F HelloWorld.xcodeproj 一 | Main.storyboard "e 
tady | Today at T 12:16 A1 E 17 


Main... > & Main... > Bl View... > @ View. ^| | View? | | Label - HelloWorld n B 


Text | Plain 
HelloWorld 
Color Wm Black Color 
Font System 17.0 mu 
Alignment (o - ; = 35 
Lines 1j. 
Behavior TA Enabled 
| Highlighted 
Baseline | Align Baselines :| 
Line Breaks | Truncate Head 3 


"9 c 
aN 
% 
o 























HelloWorld & 








Autoshrink | Fixed Font Size $ | 
Tighten Letter Spacing 

Highlighted EN Default $] 

Shadow | C= | Default $ | 

Shadow Offset o(s) | AT] 


IE Horizontal Vertical 


Mode | Aspect Fit :| 
Tag of | 

















interaction (VÍ User Interaction Enabled 
_] Multiple Touch 





Alpha "18 
Background | CI Default :| 
Tint | M | Scroll View Textured.. :| 





Drawing | | Opaque L Hidden 
(VÍ Ciears Graphics Context 
(Vf Clip Subviews 


(V Autoresize Subviews 
9 979777 weww[  — ifj lj 
X 


[B j (Bj][& Fe rei la = a] [  —139rL — 9 
D 0} e m 











图 5-26 标签 的 属性 检查 


Label 组 主要 是 文本 相关 的 属性 ,而 View 组 主要 是 视图 相关 的 设置 。 可 以 通过 双击 或 
者 查看 属性 来 实现 Label 控件 的 文本 输入 ,这 里 的 属性 指 的 就 是 Label 下 的 Text 属性 。 下 
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面 介 绍 一 些 与 设计 师 有 关 的 Label 组 主要 的 属性 : 
m Text 属性 ,可 以 设置 标签 显示 的 文本 ,这 个 属性 也 可 以 适合 于 其 他 文本 类 型 的 控件 
(如 文本 杠 、TextView 等 ) 。 
m Color 属性 ,可 以 设置 文本 颜色 。 
m Font 属性 ,可 以 设置 文本 的 字体 。 
m Alignment 属性 ,可 以 设置 文本 的 对 齐 方式 。 
Label 其 他 属性 就 不 介绍 了 ,这 些 属 性 与 设计 师 关 系 不 是 很 大 。 下 面 再 来 看 看 View 组 
主要 的 属性 : 
m Alpha 属性 ,设置 视图 的 透明 度 , 它 的 设置 范围 是 0.0 一 1.0 之 间 ,0.0 是 透明 的 ,1.0 
是 完全 不 透明 的 。 
m Background 属性 ,设置 背景 颜色 。 
m Tint 属性 ,设置 着 色 属 性 。 
View 组 的 其 他 属性 就 不 再 介绍 了 。 


5.5 RJE A 


REESE AA F tI EE A E A E, RODRSRE4 dE Ro We EDT E K KRAN 
位 置 ,选中 设计 视图 中 的 HelloWorld >R TRA qs dà 4l w9 ,打开 尺寸 检查 ,如 图 5-27 
所 示 o 














] 
iHelloWorld B The sédected views have no consiranti At buid fime 
[ n explscit MA top. width, and height consirainm will be 
generated *or ew 


Butt mercegs touch eventi and 
Button sendt ja acron mensage to a target ohbyec 
V tapped 


Segmented Control - Displays mutipie 
g: segments, each ot which functions r^ à 
dtscrete hu ttn" 


Text — Displays establie text and 
[s] E = hH Hn E QAQ zz C Tent sitam en message to 4 target agant 
v is 


图 5-27 PERTRA 
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有 关 尺 寸 取 值 如 图 5-28 所 示 , 其 中 X 为 118、 Y X 162, Width 为 93 和 Height Jy 21, 
我 们 需要 注意 的 是 XX 和 Y 值 , 它 与 Origin 有 关系 ,Origin 是 视图 的 原点 , 设 定 标签 视图 的 哪 





个 角 作 为 原点 。 
View 
aum Show | Frame Rectangle 
118 |. 162 |; 
X Y 
93 |. 21 |l. 
. , Width Height 
162 Origin 
Intrinsic Size | Default (System Defined) 
118 Constraints 
HelloWorld T | 21 The selected views have no constraints. At build time 
|a explicit left, top, width, and height constraints will be 
Mere generated for the view. 
93 





图 5-28 标签 的 尺寸 设置 


5.6 4E iOS 设备 上 运行 应 用 原型 





产品 演示 和 可 用 性 测试 是 要 在 OS 设备 ( 真 机 ) 上 进行 的 。 本 节 介 绍 如 何 将 Xcode 原 


型 发 布 到 真 机 上 。 然 而 ,以 保证 开发 者 和 苹果 的 自身 利益 为 初衷 ,为 了 
防止 非 授 权 用 户 和 设备 的 使 用 ,苹果 对 能 在 10S 设备 上 运行 的 应 用 有 Lm 
者 严格 的 限制 ,因此 ,还 需要 一 套 复杂 的 操作 才能 实现 。 操 作 流 程 如 
图 5-29 所 示 。 下 面 分 别 介 绍 一 下 该 流程 中 的 各 环节 。 

提示 : 应 用 在 设备 上 运行 和 App Store 发 布 都 必须 使 用 革 果 iOS 
开发 者 账号 (Apple ID) ,申请 苹果 108 开发 者 账号 的 个 人 开发 者 需 支 Uem cU 
AF 99 美元 /年 ,因此 作为 设计 师 , 我 们 也 可 以 向 自己 身边 的 1OS 开发 者 


ATANN, 
5.6.1 创建 开发 者 证 书 图 5-29 设备 运行 


要 想 在 iOS 设备 上 运行 应 用 程序 必须 具有 开发 者 证 书 。 每 个 开发 
人 员 一 次 仅 允 许 使 用 一 个 开发 者 证 书 。 证 书 的 管理 可 以 登录 10S 开发 中 心 的 配置 门户 网 
站 (iOS Provisioning Portal) ,网 址 为 https://developer. apple. com/1os/manage/overview/ 
index. action, X* 3€ m Z5 2E JR. IOS 开发 者 账号 ,登录 成 功 之 后 ,页 面 如 图 5-30 所 示 。 

单 击 左边 的 10S Apps 下 面 Certificates QEP ) ,证 书 管理 页 面 如 图 5-31 所 示 , 单 击 其 中 
某 个 证 书 , 结 果 如 图 5-32 所 示 , 此 处 下 载 证 书 和 删 际 (Revoke) 证 书 。 
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图 5-30 登录 iOS 配置 门户 网 站 
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APNs Development iOS Jan 01, 2014 
APNs Development iOS Jan 10, 2014 
APNs Development iOS Jan 12, 2014 


Pass Type ID Jan 15, 2014 
Fass Type ID Jan 17, 2014 
APN1 Development i05 Jan 30, 2014 
105 Development Jui 02, 2014 
105 Distribution Jul 12, 2014 


APNs Development iOS Aug 16, 2014 
APNs Development iOS Aug 16, 2014 
Pass Type ID Aug 18, 2014 
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图 5-31 证 书 管 理 页 面 
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图 5-32 证 书 下 载 和 删除 页 面 


如 果 没 有 证 书 需要 创建 ,创建 分 成 两 步骤 : 
(1) 生成 证 书签 名 公 甸 ; 
(2) 提交 证 书 公 铀 文件 到 配置 门户 网 站 。 
1. 生成 证 书签 名 公 铀 
生成 证 书签 名 公 钥 ,需要 在 安装 有 Mac OS X 操作 系统 的 苹果 电脑 中 打开 应 用 程序 一 
实用 工具 一 钥 秆 串 访问 ,如 图 5-33 所 示 。 
eoo erpa 
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图 5-33 钥匙 串 访 问 工具 
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选择 荣 单 钥匙 串 访 问 一 证 书 助理 一 从 证 书 颁 发 机 构 请 求证 书 , 弹 出 对 话 框 如 网 5-34 所 
示 ,在 用 户 “ 电 子 邮 件 地 址 ?中 输入 “eorient@ sina. com”,“ 常 用 名 称 ” 输 入 “eorient”, 然 后 在 
“请 求 是 ”中 选择 “存储 到 磁盘 ”。 

















ie eoo 证 书 助理 
证 书信 息 

输入 您 正在 请 求 的 证 书 的 相关 信息 。 点 按 " 继 续 "以 从 CA 请 求证 

用 户 电 子 邮件 地 址 : | eorient@sina.com - 

常用 名 称 

CA 电子 邮件 地 址 : | | 

ARE: 用 电子 邮件 发 送 给 CA 
© 存储 到 磁盘 
让 我 指定 密 争 对 信息 

| 继续 











图 5-34 证 书 助 理 信 息 


在 图 5-35 所 示 页 面 中 输入 信息 后 , 单 击 “ 继 续 ” 按 钮 ,会 弹出 图 5-35 所 示 证 书签 名 公 针 
文件 存储 对 话 框 ,可 以 修改 文件 名 和 存储 位 置 。 


MN y 





s» ) (meg 





图 5-35 ”证 书签 名 公 钥 文件 存储 对 话 框 





如 果 上 默认 不 修改 , 单 击 “存储 ”按钮 存储 ,生成 CertificateSigningRequest. certSigningRequest 
(CSR, 证 书签 名 请 求 ) 文 件 并 保存 到 昌 面 。 

2. 提交 证 书 公 钥 文件 到 配置 门户 网 站 

生成 CSR 文件 后 ,重新 回 到 配置 门户 网 站 提交 证 书 公 钥 文 件 。 在 图 5-32 页 面 可 以 请 
求 开 发 者 证 书 , 单 击 “ 十 ”按钮 添 加 证 书 ,进入 如 图 5-36 所 示 的 页 面 ,其 中 Development( 开 
发 ) 和 Production( 产 品 ) ,设计 师 只 需要 选择 Development 中 的 10S App Development $È n] 
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以 了 。 和 选择 10S App Development 单 击 Continue 按钮 后 进入 到 下 一 个 页 面 ,如 图 5-37 所 
示 , 这 个 页 面 是 关于 创建 CSR 文件 的 介绍 。 






eoo Add - iOS Certificates - Apple Developer 
Pa Ello | 区 é Apple nc dh. developer appie com — n certificate /certificateCrmate action 


é Developer Tochnologies Resources — Program Suppor Member Center (Q Ses" oe 
Certificates, Identifiers & Profiles ja vuniong * 
iOS Apps : Add iOS Certificate [a 
* Certificates © 
= Al 
* Pending EE 
: ss S| What type of certificate do you need? 
* Productnion 
45. Identifiers © 
s pn es Development 
* Pass Type ID} 
* Website Push IDs | iOS App Development 
B oevices e Sign development versions of your iOS app. 
* Al . Apple Push Notification service SSL (Sandbox) 
局 Provisioning Profiles e Establish connectivity between your notificatian server and the Apple Push Notification service 
ai sandbox environment. A separate certificate is required for each app you develop. 
= Devetogment 
* Distribution 
Production 
.— App Store and Ad Hoc 


Sign your iOS app for submission to the App Store or for Ad Hoc distribution. 

Apple Push Notification service SSL (Production) 

Establish connectivity between your notification server and the Apple Push Notification service 
production environment, A separate certificate is required for each app you distribute. 


` Pass Type ID Certificate 
Sign and send updates to passes in Passbook. 


| Website Push ID Certificate 
Sign and send updates for Websites, 


Intermediate Certificates 

To use your certificates, you must have the intermediate signing certificate in your system 
keychain. This is automatically installed by Xcode. However, if you need to reinstall the 
intermediate signing certificate click the link below 


ua Worldwide Developer Relations Certificate Authority 


ae NITE 


Copright © 2013 Appie Inc. All wghis reserved. — Tee wi Ue Im p Pohbey 


图 5-36 添加 证 书页 面 


在 图 5-37 创建 的 CSR 说 明 页 面 中 ,只 需 单 击 Continue 按钮 进入 下 一 个 页 面 , 如 图 5-38 
所 示 ,这 个 页 面 是 提交 证 书签 名 公 钥 文件 的 ,是 将 本 地 计算 机 创建 的 证 书签 名 公 钥 文件 上 传 
到 开发 者 网 站 。 在 页 面 中 单 击 Choose File. . .按钮 ,选择 本 地 的 CSR 文件 , 单 击 Cenerate 
按钮 。 如 果 提 交 成 功 会 出 现 如 图 5-39 所 示 的 页 面 。 





* Production 
im. identifiers 
* App IDs 
5 Pass Type IDs 
* Website Push IDs 
D Devices 
* Al 
Lo Provisioning Profiles 
* Ali 
* Development 
- Dherninunon 
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Add iOS Certificate 





About Creating a Certificate Signing Request (CSR) 





To manually generate a Certificate, you need a Certificate Signing Request (CSR) file from your 
Mac. To create a CSR file. follow the instructions below to create one using Keychain Access. 


Create a CSR file. 
In the Applications folder on your Mac, apen the Utilities folder and launch Keychain Access 


Within the Keychain Access drop dawn menu, select Keychain Access » Certificate Assistant » 
Request a Certificate from a Certificate Authority. 
e In the Certificate Information window, enter the following information: 
- |n the User Email Address field, enter your email address. 
- |n the Common Name field, create a name for your private key (e.g.. John Doe Dev Key). 
- The CA Email Address field should be left empty. 
- |n the "Request is" group, select the "Saved to disk" option. 
e Click Continue within Keychain Access to complete the CSR generating process. 


c £^ -TZE 
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图 5-37 创建 CSR 说 明 页 面 
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omi account / 106) Cerificame i cerificateC este acnonmformiDe65 337 842 





€ Developer Technologies — Mesourtes Programs Support Member Cemer (sanr oe 
Certificates, Identifiers & Profiles lia vuniong * 
IS Aene Add iOS Certificate La] 
*. Certificates 
M 
snc "d 
à j| Generate your certificate. 
* Production 
a Identifiers 
* App IDs With the creation of your CSR, Keychain Access simultaneously generated a puhlic and private 
*» Pass Type lOs key pair. Your private key is stored on your Mac in the login Keychain by default and can be 
viewed in the Keychain Access application under the "Keys" category. Your requested 
DP certificate will be the public half of your key pair. 
D Devices 
= Al 
Upload CSR file. 
kd Provisioning Proies Select .certSigningRequest file saved on your Mac. 
* Ali 
* Deveiopment F 
* Distribution | Cea Fla | 
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图 5-38 ”提交 证 书 请 求 (CSR) 文 件 
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Download, Install and Backup 
Download your certificate to your Mac, then double click the .cer file to install in Keychain 
Access. Make sure to save a backup copy of your private and public keys somewhere secure. 


7. Name: iOS Development: jia yunlong 
ut Type: iOS Development 
d 

- Expires: 7 05, 2014 


Download 





图 5-39 ”提交 CSR 成 功 


在 图 5-39 所 示 的 提交 成 功 页面 单 击 Download 按钮 ,可 以 下 载 经 过 签名 的 数字 证 书 文 
件 。 这 个 证 书 文件 用 于 在 10S 设备 上 运行 应 用 程序 时 候 的 数字 签名 ,否则 你 的 应 用 无 法 在 
设备 上 运行 。 

5.6.2. Wit 

苹果 为 了 控制 10S 设备 的 非法 使 用 要 求 为 运行 的 10S 设备 进行 注册 ,注册 过 程 也 是 在 
开发 者 网 站 完成 的 。 单 击 左 边 导航 亲 单 的 Devices, 如 图 5-40 所 示 。 

















eoo iOS Devices - Apple Developer oO F 
"ra E O pe (3 Appie inc. l developer.apple.com «oo Io cove i dawvicel ist artio c Q 
Certificates, Identifiers & Profiles ja yuniomg = 
iOS Apps - 
$ Certificates © 
- All 
* Pending 
UDID 
* Development 
fsw 771934873d9bb4767ce(74971472886649144299 
* Production 
Inforw4 db22461d7103599453dag04317573f95e929f796 
Ww Identifiers © 
* App IDs Infow1l 521ed4c29898ccba66594e3ab2492a0113374bt7 
* Pass Type IDs infow2 164869592bab7de8914d98ac 19e82c616bc35321 
* Website Push IDs intow3 6a29da8I678 Ldc93cchc&ce9 1156512 16467455 
[] Devices © 
" tony `s touch 2«14btde27761667c26257b967036f8de 1667651 
| 7 
à m e tony ipod elfb95haecfübe70e 192082c803a9a44dd6e22bd 
= Al yy ah6e65s3e62c3233b7bbed9b7941 亿 bk77b33fa48 
* Development “Bigfish” iPad 4df25d5íab2ee3e89572c58b0921318367159864 
S Ontribution “sony” iPad 42220903 LbOb4 20efdefb&fiecbe4f47c7d1db7b 
^tonyguan" iPad 3cdbd17e5ae5adtfi2e5b846ae2tbc 5b4 3eb1096 
^tonyguan^i iPod 2c14bcde27761607c2€257b90703618de1467655 
| “heth iPad 953419973!b38ae78celelfdee8d5c3664177b23 
ttifipad2 13e3a217falcldcefbcd634d0291e31e1204e218 
m*2013 139c1c0902999148704402e2955d98106ae 14b3b 


图 5-40 设备 注册 ( 虚 化 ) 
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可 以 在 图 5-40 所 示 页 面 管 理 注 册 设 备 ,如 末 我 们 单 击 其 中 的 某 个 设备 ,如 图 5-41 所 示 
会 展开 页 面 , 在 这 里 可 以 编辑 和 禁用 设备 。 





Name 









Name: fsw 
UDID: 77193a87ad9bb4767cef7d9710728866d9a44299 


图 5-41 修改 设备 注册 信息 ( 虚 化 ) 





如 果 想 要 添加 新 的 设备 ,我 们 需要 在 图 5-40 所 示 的 页 面 , 单 击 Get Started 按钮 后 重新 
获得 设备 列表 后 ,右上 角 的 “十 ”按钮 才能 点 击 , 这 说 明 可 以 添加 设备 了 。 图 5-42 所 示 的 页 
面 是 设备 添加 页 面 ,选择 Register Device. TE Name( 设 备 名 ) 和 UDID( 设 备 ID) 中 输入 对 应 
的 内 容 , 其 中 Name 是 自己 随便 命名 的 ,而 UDID 是 跟 你 的 10S 设备 有 关 的 。 








iOS Apps E Add iOS Devices AQ] 
4 Certificates © 


a All 
suse "3 istering a New Device or Multiple Devi 
WARS Registering a ce or ple ces 
* Productsun 
^ identifiers o 
* App IDs 
Pası Type is Pre-Release Software Reminder 
You may only share Appie pre-release software with employees, contracton. and members of your 
= Webyww Push Ds organization who are registered as Apple developers and have a demonitrabile need to know or use Apple 
O Oevkes c vottware to develop and test appécaponm on your behall 
OAM Unauthorized distribution of Appie confidentul information (chudimg pre-release software) is prohibited and 
L Provisioning Profiles o may result in the termination of your Apple Devesoper Program. tr may also subject yau to Civil and cr«mimal 
Sahility. 
* Al 
- Develonmert 
= Dnrnbution 
® Register Device 
Name your device and enter its Unique Device Identifier (UDIDI. 
Name: | yony 'y touch 





wo [rrr] 


ter Multiple 
Upload a file containing the devices you wish to register. Please note that a maximum of 
100 devices can be included in your file and it may take a few minutes to process 
Download rampie files 


Lappy © 11A m Amm rrra ILS NT Megi fm 


图 5-42 ”添加 设备 ( 虚 化 TODO) 
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提示 : 获得 设备 ID, 可 以 把 设备 连接 到 1Tunes 查看 设备 信息 ,如 图 5-43 所 示 , 设 备 信 
息 默 认 显 示 的 是 序列 号 ,我 们 可 以 单 击 序列 号 ,就 会 变 成 标识 符 (UDID) 显 示 , 这 个 标识 符 
就 是 设备 ID, 我 们 可 以 单 击 右键 复制 它 。 


NE nW? AFR BÄ Á— *&HKTUH — Podcast IflunesU (mu "^ m" 





IPod touch 
? saar -— "tonyguan" 的 iPod 5 ios 7.0 
cnm 4X: Eons) ED 您 的 iPod 软件 已 经 是 最 新 的 。|Tunes $F 13-9-11 再 次 自动 检 : 
新 。 

^^. Genus J SN: 28.03 GB 
TEL EPG: C3RJLOSPFAKA | “被 查 更 新 | | *&uülPod. | 
Ooixen" ? 

“tonyguan" 的 iPod 5 

368 Ew 

WU: 2803 GB 


图 5-43 ”获得 设备 ID 


在 图 5-42 页 面 中 输入 信息 完成 后 , 单 击 Continue 按钮 进入 如 图 5-44 所 示 的 页 面 , 在 这 
个 页 面 中 我 们 可 以 查看 要 注册 的 设备 信息 ,如 果 确 认 无 误 , 单 击 Register 按钮 就 可 以 添加 
设备 了 。 


eon Add - iOS Devices - Appie Developer Pd 
ET I € Appana developer appie.com - device / dmeceGrate action Phorm e lo 
Certificates, Identifiers & Profiles pa yuniong = 
iOS Apps 。 Add iDS Devices EZ 
| 
o carienes hs 
| 
sonat Bl review ana regi 
view ster. 
* Developmem reg 
s Producton 
m. identifiers o 
* App IDs Confirm the device information is correct. Once this device is registered. you will not be able 
s Pass Type IDi to edit the UDID and can only edit the name or disable it. 
* Website Push IDs 
Bj Devices T Name: tony ‘s touch 
i UDID- 2c14bcde27761f667c28257b09e67036(8de 167651 
局 Provisioning Profiles o 
a All 
* Developrmem 
* Distribution 


You can register 82 devices. 
The maximum number of devices you can register per membership year is 100, You may reset 
your device list at the start of your next membership year. 


ei | 5] EE 


图 5-44 注册 设备 
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5.6.3 创建 App ID 


设备 注册 成 功 后 还 需要 为 应 用 创建 App ID. App ID 是 针对 应 用 的 注册 。 该 过 程 也 是 在 开 
发 痢 网 站 完成 的 。 单 击 左边 吐 航 亲 单 的 App IDs 进入 App ID 管理 页 面 ,如 图 5-45 Brzs 








€ Developer Techneisgé: — Nasoues — Programm — Wepoot — Member Cónter mp 
Certificates, Identifiers & Profiles ja puntang © 
iOS Apps * iOS App IDs * Q 
6 Corin e ap 
"A^ Mam - 可 
nang 4U0160ympics tom. S Lwork& -0L60lymons 
D Cariae Amt £009. 5 Lwork t Apimtis 
» erodwcnos 
Apmi Cx (oem 5 Lwork b Apmti CX 
m Wentifers o 
- App its ARLe&alloni da (oen S work h ARLaBahonLite 
a Fus Type s Autil*r enald keen 5 lanki Autefrenad 
* Wabena Push IS DemoiClóudAeplD. pe 5 |worké DemorCoudApo 
- e FreeAutoPvepaid ton 5 work FreeAutoPrepaid 
* Al 
FrvsMubile Aubarepasd tam 5 lwnh Fiss MaobiledutuPre peli 
(o Prmvissanamg Pra 人 le © 
» Ali tuarWallTour rom 5 lw hh GrearfallTmur 
o Devesopm pnm CraatWallToureD coer 5 Lwnrk& CreatiallTourHD. 
» Destriburian IAPDemo tam 5 Lack LAPDero 
teballan tom. 5 work & Le&allon 
LeBaltonLite Lom .5 Lworkb.Lefalinrias 
Lipang)murmney «men 5 Lock Lipamglourney 
Lipang]joorney Ad toen 5 Lwoekb LifiamgiourmeyAd 


图 5-45 App ID 管理 页 面 


可 以 在 图 5-45 所 示 页 面 管 理应 用 的 App ID, 如 采 单 击 其 中 的 菜 个 App ID, 如 图 5-46 
所 示 ,就 会 展开 页 面 , 在 这 里 可 以 编辑 App ID. 





Name 2.1). D 


Application Services: 

Service Development Distribution 
Data Protection © Disabled © Disabled 
Game Center € Enabled © Enabled 
iCloud © Disabled © Disabled 
In-App Purchase € Enabled € Enabled 
Inter-App Audio D Disabled © Disabled 
Passbook 5 Disabled © Disabled 
Push Notifications © Disabled © Disabled 
| Edit 





图 5-46 修改 App ID 页 面 
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如 果 要 添加 新 的 App ID 需要 在 图 5-45 所 示 的 页 面 中 , 单 击 右上 和 角 的 “十 ”按钮 ,如 
图 5-47 所 示 , 页 面 有 3 个 输入 项 : 


hh ha er cde * | 


PENI Ya rr. pe. EDIB | acr tn o ipm fms imde leetttivt ommo st mi O. 





€ Developer Techmalogiss — Wasouttes — feogrami Support — MemberCame! Go- ioo -— 


Certificates, Identifiers & Profiles he vertung * 





E JID Registering an App ID 


The App ID string contains two parts separated by a period (.)—an App ID Prefix that is defined 
as your Team ID by default and an App ID Suffix that is defined as a Bundle ID search string. 
* Wenite Push IDs Each part of an App ID has different and important uses for your app. Learn More 


a Provisioning Profites e App ID Description 





Name: | Heowersd 
* Development You cannar was aneriai characters tach as QA "C 
* Durnpunaon 


App ID Prefix 


Value | M&IMMEXUQ Tem iD) $ 


App ID Suffix 


© Explicit App ID 
If you plan to incorporate app services such as Game Center, In-App Purchase, Data 
Protection, and iCloud, or want a provisioning profile unique to a single app, you must 
register an explicit App ID for your app. 


To create an explicit Apo ID, enter a unique string in the Bundle ID feld. This string 
should match the Bundle ID of your apo. 


nde [essem — — — — — — —] 


We necamenenáü anag à neeerga - domam mame soya smeg o « 
tom domainname agpnames. it cannot ceetain an asterità (*) 


D Wildcard App iD 


This allows you to use à single App ID to match multiple apps. To create a wildcard App 
ID, enter an asterisk (*) us the last digit in the Bundle ID feld. 


bundle ID 


App Services 


Select the services you would like to enable in your app. You can edit your choices after this 
Apn ID has been registered. 


Enable Services: | Data Protection 
Complete Protezbon 
Protected Uniess Open 


Protected Until First User Authenticatior 


* Game Center 

_ (Cloud 

* In-App Purchase 
i Inter-App Audio 
口 Passbook 


c^ E 





Caeeriqit © 2213 Anpi bie. Alii resemontd— lyra of Uae Ser Pub 


图 5-47 创建 App ID 详细 页 面 ( 接 起 来 ) 


m App ID Description ,描述 可 以 输入 一 些 描 述 应 用 的 信息 s 

m App ID Prefix, App ID 的 前 级 ,我 们 采用 默认 值 就 可 以 了 ; 

m App ID Suffix. App ID 的 后 级, 玄 采 推荐 使 用 域名 反 写 ,本 例 中 输入 的 是 “com. 
51work6. HelloWorld”, 它 与 图 5-48 所 示 的 应 用 程序 Target 中 设 定 的 包 和 标识 
(Bundle Identifier) 保 持 一 致 就 可 以 了 。 


TARGETS 





F HelloWoridTests 








图 5-48 ”应 用 程序 Target 中 设 定 的 包 标 识 


在 图 5-47 页 面 中 完成 相应 的 信息 输入 后 单 击 Continue 按钮 ,页 面 进入 如 图 5-49 所 示 的 
页 面 ,这 个 页 面 是 App ID 信息 确认 页 面 ,如果 信息 确认 无 误 , 单 击 Submit 按钮 提交 页 面 。 


eoo Add = IOS App 104 - Apple Developer 
ws r1 c " € Apsieintd Geveloper.apoie.com - mtus oot mifer buncie iuncto mal AUD Tormi U= $3458 





. Developer Technelnges  Resowees  Progtams Support — Member Center Q nat 
Certificates, Identifiers & Profiles Ji vemacg 7 
iOS Appi > Add iOS App ID * à 
Ü Custos ° es 
* AI 
Pending fi 
iod ID Confirm your App ID. 
* Productian 
= identifiers o 
— Anp IDs To complete the registration of this App ID, make sure your App ID information rs correct, and 
* Pass Type IDs click the submit buttna. 
Website Push Os 
W Series e App ID Description: HelloWerld 
= All 
identifier | 9823R5XU29.com.5 1work6.HelloWorld 
os Provisioning Profiles o 
» Al Data Protection: © Disabled 
- Dewloomen Game Center * Enabled 
= Distribution iCloud: © Disabled 


In-App Purchase ® Enabled 
Inter-App Audio: — Disabled 
Passbook © Disabled 

Push Natifications © Oisablad 


— 2 
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图 5-49 App ID 确认 页 面 ( 接 起 来 ) 


[5 121 
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5.6.4 创建 配置 概要 文件 


配置 概要 文件 (Provisioning Profiles) 是 应 用 在 设备 上 编译 时 使 用 的 ,文件 分 为 开发 配 
置 概要 和 发 布 配置 概要 文件 ,分 别 用 于 开发 (运行 ) 和 发 布 。 管 理 配 置 概要 文件 的 页 面 如 
图 5-50 所 示 ,通过 左边 的 导航 菜单 Provisioning Profiles 进入 。 





eoo iOS Prowsioning Profiles - Apple Developer 
Pya r1 AL à ( account mii arae rormmhnites emt artar 
* Developer Technologies Resources Programs Support Member Center 'Q, wart Develocs 
Certificates, Identifiers & Profiles pa yuniong * 
iOS Apps ~ iOS Provisioning Profiles EIEN 
* N| | Name ~ Type Status 
a Pending ampts appstore Dvstribution O txpred 
* Development | ApmisC Distribution O Erplred 
* Produchon | 
DemoiCioudProtite Development ü imwalid 
& Identifiers o | 
« App IDs | eoreimt all Development A mwalid 
* Pass Type IDs 105 Team Provisioning Profile: * Development © Active (Managed by Xcode) 
| 
* website Push Os iOS Team Provisioning Profile co Development ® Active (Managed hy Xcode) 
jj Devices © | (os Team Provisioning Profile: co Development € Acuve (Managec by Xcode) 
* Al 
105 Team Provisioning Profile co Development © Active (Managed by Xcoda) 
.. Provisioning Profiles o9 | 
«AN i05 Team Provisioning Profile: co Development © Active (Managec by Xcode) 
| 
- Development 105 Team Provisioning Profile: co Development ® Attive (Managed by Xcode) 
* Distribution IOS Team Provisioning Profile co Development d Acive (Managec by Xcode) 
| 105 Team Provisioning Profile co Development * Active (Managec by Xcode) 
IOS Team Provisioning Profile co Develapment © Active (Managed hy Xende) 
| IOS Team Provisioning Profile co — — Development © Active (Managed by Xcode) 
105 Team Provinioning Profile co Development © Ative (Managed ty Xcode 





图 5-50 ”管理 配置 概要 文件 页 面 


可 以 在 图 5-50 所 示 页 面 管 理应 用 的 配置 概要 信息 ,如 打 我 们 单 击 其 中 的 茶 个 配置 概要 
HA ,如 图 5-51 所 示 会 展开 页 面 , 在 这 里 可 以 编辑 配置 概要 信息 。 





Name ^ Type Status 


pt ippstore Distrnbutrion Expired 





Name: ampts appstore 

Type: Distribution 

App ID: Apmts (com.5 1work6.Apmts) 
Certificates: 1 total 

Devices: 0 total 

Enabled Services: In-App Purchase, Game Center 
Expires: Nov 28, 2012 

Status: @ Expired 








| Delete | Edt | 





图 5-51 修改 配置 概要 信息 
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在 图 5-50 所 示 的 页 面 中 单 击 “ 十 "按钮 进入 创建 配置 概要 文件 页 面 ,如 图 5-52 所 示 , 其 中 
Development 用 于 管理 开发 配置 概要 文件 ,Distribution 用 于 管理 发 布 配置 概要 文件 ,它们 的 管 
理 过 程 是 完全 一 样 的 ,本 节 介绍 创建 开发 配置 概要 文件 的 过 程 。 选 择 Development 中 的 iOS 
App Development, 然 后 单 击 Continue 按钮 ,页面 进入 如 图 5-53 所 示 的 选择 App ID 页 面 ,这 个 
页 面 中 我 们 需要 选择 在 上 一 节 创建 的 App ID, 配 置 概 要 文件 是 要 与 特定 的 App ID 对 应 的 。 


eoo Add - (5 Pravsioning Profiies - Apple Deveioger P 
Certificates, Identifiers & Profiles jia yustong © 
iOS Apps ~ Add iOS Provisioning Profile 7a 
* AM 
2 
B Pending 
g What type of provisioning profile do you need? 
Development — 
* Producpon 
æ ddentifiers o 
sp Development 
Pass Type I» 
* Webs Push IDs © JOS App Development 
ü e Create à provisioning profile to install development apps on test devices. 
"^n 
_ Provisioning Profiles e 
- Mi Distribution 
Development f App 5 
* Distribution Create a distribution provisioning profile to submit your app to the App Store. 
Ad Hoc 


Create a distribution provisioning profile to install your app on a fimited number of registered 
devices. 


o= IN 


图 5-52 ”创建 配置 概要 文件 页 面 














i05 Apps . Add iOS Provisioning Profile ES ^3 
(enam ° ED —— 
* ^l 
&üwwinppmet |] æo ct F | ID. 
* Pródurtipe 
© identifiers © 
" App Os if you plan to use services such as Game Center, In-App Purchase, and Push Notifications, 
= Fass Type Ds or want à Bundle ID umque to à single app, use an explicit App ID. If you want to create ane 
s mien fub iDa provisioning profile for multiple apps or don't need a specific Bundle ID, select a wilócard 
App idcard App IDs use an asterisk (5) as the last digit in the Sundle ID feld. Please 
局 Devices o note that iOS App IDs and Mac App IDs cannot be used interchangeably 
* Al 
L Provitioning Profiles o App 1D  Heliowarid (9823R5XU29.cow S Dworwé HesoWord: 
= AN 
* Development 
Dstnoution 





Cope C 23013 Apoi jot Ad ique mezery Tama od we Pinoy Poscs 


图 5-53 选择 App ID 页 面 
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选择 App ID 后 单 击 Continue 按钮 ,进入 如 图 5-54 所 示 的 证 书 选 择 页 面 , 这 里 选择 的 
证 书 是 我 们 前 面 创 建 的 证 书 。 





w Developer Tethioigies — Resources Hogans — Suppe! — Membertemer 去 二 一 
Certificates, Identifiers & Profiles ja seriar © 
iOS Apps . Add iOS Provisioning Profile EB ^73 
ee -z ED —0— 
a Aii 
e E 
Select certificates. 
* Dewrtapment Lr 
> Producti)s 
c en o 
* App Dt Select the certificates you wish to incude im this provisioning profe, To use this profile to 
a Puts Type ID install an app. the certificate the ago was signed with mutt be inchuded 
» Wetrone Pust IDs 
D Devices e B ien n Law io smivl artus 
-— MW. ja vunioag (US Dessen 
oo Previsooning Profiles o MÉ jia yunipeg n05 Deve smesr 
- aM 
* Deveiapmeni 
— c-  Í£  NEEN 
Lepeta ainm &s db o mere o-- t. Fe ' n) 





图 5-54 选择 证 书页 面 


选择 合适 的 证 书后 , 单 击 Continue 按钮 ,进入 设备 选择 页 面 , 如 图 5-55 所 示 。 配 置 概 
要 文件 也 会 与 设备 相关 的 ,如 果 想 要 应 用 在 有 个 设备 上 运行 ,就 需要 勾 选 该 设备 。 



















ie — Mercuri Mogami  Soppot Siende Cem 


Certificates, Identifiers & Profiles 


^ Penibag 
E Select devices. 
^ Develapmest 
* mooucnon 
a demier o 
* lens Select the devices you wish vo mclude in this provisioning profile. To install an agp soneg with 
* Pass Type OY this profile on a device, the device miest be included. 
* Wehsns Push 有 
ü eo M ivo CE EA imos ein 
» Ali M oh. 
co frovisioning Protiws © MO mw 
= as E wi 
Us velsgrnent « 
* Dutriution 
MO omoni 


= iomp 


图 5-55 选择 设备 页 面 
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选择 好 设备 后 , 单 击 Continue 按钮 ,进入 文件 生成 页 面 ,如 图 5-56 所 示 , 单 击 Generate 
按钮 生成 配置 概要 文件 。 生 成 之 后 进入 配置 概要 文件 下 载 页 面 ,然后 把 该 文件 下 载 到 本 地 。 














eno Add -05 Provisioning Prafiles - Apole Developer 
[s 0 11 | OS] [Et] | é epi nc developer apoie.com . io 
Idi HE gemi Ameti MEME Tun BN MC de r. 
é Developer Technologies Resources Programs Support Member Center 


Certificates, Identifiers & Profiles 
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iOS Apps m Add iOS Provisioning Profile zj Q 
/ Certificates © Select Type Configure Cenerate Downlaad 
All 
Pending i] 
Name this profile and generate. 
Development rauy 
Production 
ip Mentifiers © 
App x The name you provide will be used to identify the profile in the portal. You cannot use special 
Pass Type IDs characters such as i», &, *, '. " for your profile name 
Wehtite Push IDs 
Profile Name: | Wellewarid | 
J Devices o 
zs Type: Development 
Provisioning Profiles e App ID: HelloWorld (9823R5XU29.com.5 1 workó.HelloWorld) 
Al Certificates: 2 Included 
Devices: 18 Included 


图 5-56 ”生成 配置 概要 文件 


5.6.5 在 设备 上 运行 应 用 


为 了 能 够 实现 设备 运行 ,需要 下 载 配 置 概要 文件 ,下 载 成 功 后 双击 该 文件 就 会 吐 人 到 
Xcode 工具 了 ,我们 就 可 以 进入 Xcode 运行 了 了。 双击 HelloWorld 工程 文件 启动 Xcode, 启 
动 后 选择 HelloWorld 工程 的 TARGETS 下 的 HelloWorld, 依 次 单 击 Target — Build 
Settings~> Code Signing — Code Signing Identity, 选择 代码 签名 标识 (Code Signing 
Identity) ,如 图 5-57 所 示 ,选择 Code Signing Identity 后 面 的 Multiple values, £A Ja 9f H3 3€ 
单 ,在 菜单 中 选择 Automatic 中 的 10S Developer, 





然后 n 行 设备 ,确定 你 的 10S 设备 与 计算 机 连接 好 ,如 图 5-58 所 示 选 择 设备 ,然后 
单 击 工具 栏 左边 Run B 按钮 运行 应 用 。 


以 上 通过 完成 一 个 标签 控件 的 设置 ,实现 了 一 个 简单 的 iPhone 应 用 “HelloWorld”, 对 
Xcode 的 操作 方法 和 流程 进行 了 简单 的 了 解 ,那么 在 下 一 步 开 始 设计 应 用 的 界面 和 可 交互 
原型 之 前 ,我们 需要 对 10S 平台 的 标准 控件 、 布 局 和 导航 方式 有 一 个 比较 深入 、 全 面 的 了 解 
之 后 ,才能 够 进一步 了 解 使 用 Xcode 完成 可 交互 原型 的 方法 。 接 下 来 ,让 我 们 开始 全 面 了 
fit IOS 平台 的 标准 控件 。 
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2 ———— 2 —————— à —— E — 


Build HelloWorld: Succeeded | 13-8-26 at 17828 No lisves 



















Identibes in Keychain 
Alternate Install Owner iPhone Developer: jia yunlong (XG3Y22ZNBPC) 
iPhone Distribution: JIA YUNLONG (9823R5XU291 








«Multipie values > 















IOS Simulator 

Y I iPhone Retina (3.5-inch) 
Ii iPhone Retina (4-inch) 
d iPad 
I iPad Retina 















使 用 标准 控件 








很 多 设计 师 对 于 使 用 标准 控件 设计 的 应 用 不 悦 一 顾 , 他 们 认为 那 体 现 不 出 设计 的 水 平 。 
事实 上 作为 一 个 好 的 用 户 体验 师 首先 要 懂得 规范 ,之 后 才 可 以 超越 规范 去 发 挥 。iOS 6 和 
iOS 7 平台 有 着 各 自 不 同 的 设计 理念 和 规范 ,而 遵循 这 些 规范 能 够 使 你 的 应 用 设计 得 更 有 
iOS 平台 独特 的 味道 。 

本 章 将 介绍 1OS 6 A iOS 7 两 个 版 本 标准 控件 的 规范 和 使 用 方法 。 


6.1 文本 输入 /输出 


文本 信息 是 最 为 第 用 的 界面 元 素 ,根据 输出 的 方 回 分 为 输入 和 输出 。 文 本 输入 是 用 户 
只 能 查看 内 容 而 不 能 修改 的 控件 。 文 本 输出 是 用 户 可 以 进行 编辑 修改 的 控件 。 


6.1.1 文本 输出 控件 


在 文本 输出 时 可 以 设置 为 单行 文本 输出 、 多 行文 本 输出 和 可 设 定 样式 的 多 行文 本 输出 
几 种 情况 。 

1. 单行 文本 输出 

iOS 单行 文本 输出 控件 为 标签 控件 。 可 以 使 用 这 个 控件 输出 静态 文字 提示 信息 ,但 是 
它 只 能 输入 一 行 短 文本 。 如 图 6-1 所 示 是 iPhone 的 HelloWorld 应 用 。 

关于 单行 文本 输出 控件 “标签 ”的 主要 属性 在 第 5 章 已 经 做 了 详细 的 介绍 ,这 里 就 
不 再 介绍 了 。 

2. 多 行文 本 输出 

IOS 使 用 的 控件 为 TextView,TextView 事实 上 是 可 输入 控件 ,但 是 可 以 给 它 设 置 为 只 
读 , 这 样 就 可 以 将 它 作 为 输出 控件 了 。 图 6-2 所 示 是 TextView 案例 。 

图 6-3 所 示 的 是 从 对 象 库 中 拖 忠 并 设计 TextView 过 程 ,在 对 象 库 中 找到 TextView 拖 
忠 到 设计 视图 中 ,然后 再 调整 它 的 大 小 和 人 位置。 如果 想 把 TextView 设置 为 只 读 的 ,需要 将 
Behavior 中 的 Editable 属性 设置 为 不 勾 选 。 
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Wa 令 8:48 PM 


Lorem ipsum dolor sit er elit lamet, 
consectetaur cillium adipisicing pecu, sed do 
eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut 


esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum. Nam liber te conscient to 
factor tum poen legum odioque civiuda. 





图 6-1 iPhone 的 HelloWorld 应 用 图 6-2  TextView 案例 


E anso Bivescow. evwe Fv invw] — B B *-9 














€ NE re Ba = 5 








图 6-3 R TextView 到 设计 视图 
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但 是 TextView 对 文本 只 能 设置 统一 样式 ,不 能 设置 不 同 的 样式 ,如 果 需 要 设置 不 同 的 
样式 则 可 以 使 用 WebView ,如 图 6-4 所 示 。 


iOS 384098 — iPhone Retina (3 S-inck) 10570411A4449b) 
运营 商 令 9:11 PM =Æ 


WebView: 帮助 


e Create 
e Edit 
e Deletc 
e Mail 


Create: 
You can create new notes by selecting the * 
button in the upper right hand side of the main 


list of notes. This will create a new blank note 
for editing. 


Edit: 

You can edit notes by selecting a note from the 
list on the main list page. This will bring your 
existing note up in the editor. You can edit the 
note and save your changes. 


Delete: 
You can delete notes by selecting the edit 





图 6-4 WebView 案例 


提示 : 可 设 定 样式 的 多 行 长 文本 输出 需要 使 用 WebView,WebView 可 以 加 载 HTML, 
解析 CSS 和 运行 JavaSctript 这 些 Web 技术 ,在 10S 平台 WebView 能 很 好 地 支持 HTMLS, 
此 我 们 只 要 使 用 网 页 设计 工具 制作 移动 设备 大 小 的 网 页 就 可 以 了 ,相应 的 样式 可 以 通过 
HTML 和 CSS 设置 。WebView 还 有 另外 一 个 好 处 是 可 以 加 载 图 片 、 声 音 等 多 媒体 文件 。 
但 是 WebView 控件 要 显示 HTML 内 容 , 必 须 涉及 编写 代码 ,对 没有 编程 基础 的 UI 设计 师 
来 说 是 很 困难 的 事情 ,因此 ,本 书 不 再 介绍 WebView 控件 了 。UI 设计 师 如 果 要 进行 相应 
的 原型 设计 可 以 采用 图 片 来 替代 WebView 效果 。 


6.1.2 文本 输入 控件 


文本 输入 也 分 为 单行 文本 输入 和 多 行文 本 输入 两 种 和 情况。 具体 地 说 ,iO0S 在 这 两 种 情 
况 下 采用 了 不 同 的 控件 。 

1. 单行 文本 输入 情况 

iOS 使 用 的 控件 为 TextField( 文 本 框 ) ,如 图 6-5 所 示 , 左 图 为 1OS 6( 以 及 之 前 版 本 ) 风 
格 ,边框 的 内 部 具有 四 是 光泽 , 右 图 为 10S 7 之 后 的 风格 ,采用 了 扁平 化 设计 风格 ,但 是 都 还 
是 采用 圆 角 设计 ,我 们 可 以 根据 自己 需要 改变 这 一 风格 。 
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| HelloWorld | HelloWorld 


(a) iOS 6j] AHE R (b) iOS 7 的 文本 框 控件 
图 6-5 文本 框 控件 


图 6-6 是 从 对 象 库 中 拖 熏 并 设计 文本 框 过 程 , 在 对 象 库 中 找到 TextField 拖 上 忠 到 设计 视 
图 中 ,然后 再 调整 它 的 大 小 和 位 置 。 

















to...) & Mainsto... > E View Co... > 四 view Co... View ) Round Style Text Field D B Bw Eo 
| Text | Plain 
Text 
ED Color NENEN | Default :| 
Font System 14.0 (T) le 
Alignment (= c — 
Placeholder | Placeholder Text 
Background | Background Image - 
E ü Disabled | Disabled Background Image |v 
Border Style | Li LI |n mand 
Clear Button | Never appears -0 
J Clear when editing begins 
Min Font Size 171; 
| (VÍ Adjust to Fit 


Capitalization | None - 
Correction | Default 
Keyboard | Default 
Appearance | Default 








Return Key | Default 
| Auto-enable Return Key 
Secure 
Dios m 











Text Field - Displays editable text and 
Text sends an action message to a target 
object when Return is tapped. 


| ke rei EJ a 











Slider - Displays a continuous range of 
- values and allows the selection of a single 








图 6-6 ji Hi X A ESI EET EE 





下 面 介绍 文本 框 中 与 设计 师 有 关 的 一 些 属性 ， 

a Placeholder 属性 ,该 值 的 内 容 将 作为 灰 字 提示 显示 在 文本 框 中 , 当 文本 框 获得 焦点 
时 ,提示 文字 消失 。 

a Border Style( 边 框 样式 ) 属 性 ,可 以 设置 文本 框 的 边框 样式 ,默认 是 圆 角 样 式 ,还 有 无 
边框 等 3 种 样式 可 以 设计 ,它们 的 设置 是 通过 选择 图 6-6 中 属性 检查 器 的 Border 
Style JR ect EXE, CA A F7. 按钮 实现 的 。 

a Clear Button( 清 除 按钮 ) 属 性 ,可 以 设置 是 否 显示 清除 按钮 ,清除 按钮 可 以 清除 文本 
框 中 的 文字 内 容 ,图 6-7 所 示 ,我 们 设置 了 清除 按钮 为 Appears while editing, 当 需要 
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对 文本 框 输入 内 容 进 行 编辑 的 时 候 , 后 面 就 会 出 现 灰 色 的 清除 按钮 了 。 


Clear Butte Y Never appears 
Appears while editing 
Appears unless editing 
Min Font Sii |s always visible 





Hello 


图 6-7 设置 清除 按钮 属性 


Capitalization 属性 ,可 以 设置 文本 的 大 写 规 则 。 

Correction 属性 ,可 以 设置 文字 是 否 自 动 纠 错 。 

Keyboard 属性 ,可 以 设置 键盘 的 类 型 ,这 个 属性 很 重要 ,键盘 的 类 型 要 与 文本 框 输入 
内 容 保持 一 致 ,这 样 的 用 户 体验 才 会 很 好 。 图 6-8 所 示 是 设置 了 Phone Pad( 电 话 键 
SS, 

m Return KeyCEnter 键 ) 属 性 ,可 以 设置 Enter 键 的 样式 ,这 个 属性 很 重要 ,Enter 键 的 
类 型 也 要 与 文本 框 输入 内 容 保持 一 致 ,这 样 才 会 得 到 较 好 的 用 户 体 验 。 如 果 文 本 框 
是 作为 查询 输入 条 件 , 则 Enter 键 应 该 设置 为 Go( 前 往 )、Google( 合 歌 ) 或 Search( 搜 
索 ) 等 ,图 6-9 所 示 是 Enter 键 设置 了 Search 类 型 。 











运营 商 全 10:38 PM = 运营 商 倒 10:46 PM = 
23456# hell] 
1 2 3 
Ed is QIWIEIRITIYIUI ITOIP 

4 o 6 

GHI JKL MNO AISIDIFIGINIJIKIL 

FA 

a E 9 ZXCVBNM G 
Tib 0 Q9 23 Q space 
图 6-8 设置 键盘 类 型 为 电话 键盘 图 6-9 RE Enter 键 为 Search 











E Secure( 安 全 字段 ) 属 性 ,可 以 设置 是 否 对 文本 框 内 容 采 用 掩 人 码 显 示 , 即 会 在 文本 框 中 
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用 小 黑 点 代替 文字 显示 。 图 6-10 所 示 是 设置 安全 字段 属性 为 勾 选 。 
Label 其 他 属性 就 不 介绍 了 ,这 些 属性 与 设计 师 关 系 不 是 很 大 。 下 面 看 看 View 的 主要 
属性 。 
Return Key | Default 
Auto-enable Return Key 
Vv Secure ~ 

$ 

eecooc 





图 6-10 ”设置 安全 字段 属性 


2. 多 行文 本 输入 情况 

iOS 多 行文 本 输入 控件 是 在 前 文 (6.1.1 方 ) 提 到 的 TextView 控件 。TextView 本 里 可 
以 作为 输入 控件 ,也 可 以 作为 输出 控件 ,由 于 TextView 与 本 文 框 属性 类 似 , 因 此 就 不 再 介 
绍 了 。 

提示 : 文本 输入 控件 都 与 键盘 密 不 可 分 ,文本 输入 控件 在 获得 焦点 的 时 候 都 会 弹出 键 
盘 , 但 关闭 键盘 的 时 候 Android 和 Windows Phone 可 以 使 用 返回 键 关闭 。 但 10S 设备 没有 
返回 键 , 如 果 关 闭 键盘 需要 通过 编程 实现 。 


6.2 按钮 





按钮 的 作用 是 接收 用 户 点 击 事件 ,并 执行 操作 的 控件 。 按 钮 可 以 在 一 般 的 表单 中 使 用 ， 
也 可 以 在 各 种 “ 栏 ”*( 工 具 栏 .导航 栏 .标签 栏 等 ) 中 使 用 。“ 栏 ”中 使 用 按钮 的 方法 将 在 后 面 介 
绍 , 本 市 主 要 介绍 表单 中 的 按钮 控件 ,这 种 按钮 在 10S 中 称 为 Button, 

Button 在 iOS 6( 以 及 之 前 版 本 ) 默 认 样 式 为 加 角 设 计 ( 见 图 6-110200 . Æ IOS 7 之 后 黑 
认 样 式 为 无 边框 设计 ( 见 图 6-11(Cb)) ,如 果 不 喜 欢 这 些 样式 ,我们 可 以 根据 需要 进行 改变 。 














Button Button 


(a) 圆 角 边框 (b) 无 边框 
图 6-11 10S 6 的 Button f2 fF. .10S 7 的 Button 控件 
图 6-12 是 从 对 象 库 中 拖 忠 并 设计 Button 过 程 ,在 对 象 库 中 找到 Button 拖 忠 到 设计 视 


图 中 ,然后 再 调整 它 的 大 小 和 位 置 。 
下 面 介绍 Button 中 与 设计 师 有 关 的 一 些 属性 。 
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tor...» E| MainStor...> [B] View Co... ) @ View Co... ^ | | View ) | | Button - Button Dg awso 
Button 


- Type | System 3 

State Config[ Defaut — — — i) 

u— Plain $ | 

Font een Ti 

Text Color | mm | Defaut +) 

B = 9 Shadow Color | Emmm EE Defaut è O =Z = 0: EE Defalt ;| 
Button 

oo op image [Defaut Image — Ty 

Background [Default Background Image |e) 

Shadow Offset 0.0: 0.0 |[:) 

Width Height 














C] Reverses On Highlight 
Drawing | | Shows Touch On Highlight 
(Mf Highlighted Adjusts Image 
(Vf Disabled Adjusts Image 
Line Break | Truncate Middle $ | 
Edge | Content $] 
me ol 
[— —3) [— —— 9 
Left Right 
Control | 
Duo m 





Button ~ intercepts touch events and sends an — — 
Button action message to a target object when it's 





à US Fire Ella m | 





图 6-12 i, Button 到 设计 视图 


6.2.1 按钮 类 型 


Button 的 第 一 个 属性 是 Type( 按 钮 类 型 ), 它 是 一 个 非 稼 重要 的 属性 。 在 属性 检查 天 
中 选择 Button 的 Type 属性 ,会 有 6 个 选择 项 目 , 如 图 6-13 所 示 。 


Type | System IN 


图 6-13 按钮 类 型 


m Custom, 自 定义 类 型 ,选择 了 这 种 类 型 后 ,按钮 的 设计 完全 交 给 了 设计 师 , 这 种 类 型 
适合 于 设计 师 自 己 设计 一 个 图 片 作为 按钮。 
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E System, 是 系统 默认 样式 。 
Detail Disclosure, 是 细节 展示 按钮 ,主要 用 于 表 视 图 中 的 细 六 展示。 在 i9S 6 的 样 
UM e 0S 7 的 样式 为 加 。 
Info Light 和 Info Dark, 这 两 个 是 信息 按钮 ,用 于 实用 性 应 用 程序 , 单 击 后 进入 背后 
视图 。 在 10S6 rp Info Light 的 样式 为 国 Info Dark 的 样式 为 四 ,在 i0S7 中 Info 
Light 和 Info Dark 的 样式 都 为 已 。 

m Add Contact ,是 添加 联系 人 按钮 。 在 10S 6 中 的 样式 为 轧 iOS 7 的 样式 为 加 。 

下 面 通过 一 个 示例 介绍 一 下 目 定 义 类 型 按钮 的 使 用 。 图 6-14 所 示 的 搜索 酒店 是 我 们 
目 定 义 类 型 的 按钮 。 








运营 商 令 10:20 AM Ld 


Button 


搜索 酒店 


图 6-14 上 自 定义 类 型 按钮 


本 案例 需要 设计 师 设 计 如 图 6-15 所 示 的 图 片 , 它 的 高 和 冤 的 尺寸 为 294X 52 点 ,在 视 
网 膜 显 示 屏 使 用 的 图 片 尺 寸 为 588X104 RR. 


| 









图 6-15 ”按钮 图 片 


图 片 设计 好 之 后 需要 把 它 导 入 到 Xcode 工程 中 ,添加 到 工程 的 具体 步骤 是 在 工程 导航 
面板 中 ,右键 选择 ButtonSample 工程 名 ,弹出 右键 菜单 如 图 6-16 所 示 。 
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Show in Finder 


Open with External Editor ip! 
Open As » 
Show File Inspector E 
= New File... t 
» (Gi Supe New Project... 


Add Files to "ButtonSample" 





b C Products Delete 


New Group 
New Group from Selection 


Sort by Name 
Sort by Type 


Find in Selected Groups... 
Source Control > 
Project Navigator Help B 





图 6-16 添加 图 片 文件 到 工程 


WRAP HY Add Files to“ButtonSample”… 弹 出 选择 文件 对 话 框 ,如 图 6-17 所 示 ， 
选择 要 添加 的 文件 search. png, Æ Destination 中 选中 Copy items into destination group's 
folder(if needed) ,这 个 选择 可 以 使 文件 从 原始 位 置 复制 到 我 们 的 工程 目录 中 。 在 Add to 
targets 中 勾 选 ButtonSample, 这 个 选择 可 以 使 这 些 资 源 文 件 编译 到 ButtonSample TARGETS 
中 , 随 产 品 一 起 发 布 。 


(<4 » | E= m m) mv- | i images =$] (a 





























FAVORITES | button.png Hotel.png 
y 应 用 程序 
E Desktop 
* xm NN 
O TE 
图 影片 Hotel@2x.png icon@2x.png 
J2 音乐 i 
m^ e 

SHARED E | == 
E long-pc Rn 
wo ibodE. key-bg.png search.png | 


Destination. (VÍ Copy items into destination group's folder (if needed) 


Folders (*)Create groups for any added folders 
[ )Create folder references for any added folders 


Add to targets 加 人 ButtonSample 


New Folder | Ccana) li 





图 6-17 选择 文件 对 话 框 
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图 片 成 功 添加 到 工程 中 后 ,就 可 以 设置 自 定 义 按 钮 属性 了 。 如 图 6-18 所 示 ,首先 从 对 
象 库 中 拖 虹 一 个 Button 到 设计 视图 ,设置 它 的 Type 属性 为 Custom, 然 后 设置 它 的 Image 


BIEX search. png, 
| DHuu-e»-0 





Type | Custom 
L 


| State Carfig | Default 
mu — 


Button [Default Title 
Font | System 15.0 mi: 
Text Color | C i Default 1 


| Shadow Color | EE | Defauit 
made $5 07) 
wit Background brape iZ 


Background [Default Barxgr ! imag 
Shadaw Offset 0.0 |13) 99: 
Meight 


"..^ MainStory : 9 MainStory. ° Bl View Cont. > ® View Cont 








Line Break | Truncate Middie 
ls ol; 
Top 
0; 0: 
iei 


| Control 
Dno m 


n TE 


图 6-18 设置 目 定 义 按 钮 属性 
x 间 。 这 是 因为 按钮 的 大 小 


选择 完成 图 片 之 后 可 以 看 到 整个 图 片 按钮 很 大 超出 了 视图 空 
是 由 图 片 大 小 确定 的 ,图 片 的 大 小 是 588X104 像素 ,但 按钮 的 大 小 应 该 为 294 久 52 点 ,需要 
操作 过 程 是 选择 按钮 ~ 矿 才 检查 天 按钮 € ,打开 尺寸 











到 尺寸 检查 震中 修改 按钮 的 大 小 。 
查 ,如 图 6-19 所 示 ,设置 Width 为 294(588/2) ,Height 为 52(104/2) 


让 Bgm 5o 


E MainStory ，) E view Cont. > O view Cont 
Show | Frame Rectangle 
13 ; 





Xx 





4294 ; 
e b Width 
Origin 
Intrinsic Size | Default (System Defined) 





Constraints 
The selected views have no constraints, At build time Senece let 


top, width, and constraints wil! be generated for the 





图 6-19 设置 按钮 大 小 
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这 样 目 定义 按钮 就 设置 好 了 ,还 可 以 根据 需要 修改 它 的 其 他 属性 。 


6.2.2 按钮 状态 


在 10S 中 按钮 是 有 状态 的 , 它 是 通过 State Config( 状 态 配 置 ) 属 性 进行 配置 的 ,状态 有 
4 种 ,分 别 是 Default( 默 认 ) 状 态 、 Highlighted Cr NJAA , Selected GE £60 JA A fll. Disabled 
(不 可 用 ) 状 态 , 如 图 6-20 所 示 。 





State Config | Default 
Tte [Rn s) 
Button 











, 
b 
Highlighted 
Selected 
Disabled 


图 6-20 按钮 的 状态 


按钮 的 状态 属性 很 重要 ,按钮 的 很 多 属性 都 与 它 相 关 ,也 就 是 说 当 按钮 处 于 不 同 状态 的 
时 候 它 这 些 属 性 是 不 同 的 ,例如 : 可 以 设置 按钮 默认 状态 下 Image 属性 为 search. png TZ £H 
在 高 亮 状 态 下 Image 属性 为 search. down. png( 见 图 6-21)。 下 面 介 绍 Button 中 与 设计 师 
有 关 的 一 些 属性 ,这 些 属 性 包括 Title Ji PE. Font 属性 、Text Color Jg PE GÈR HE Sc 5E HJ Bl 
f&).Shadow Color 属性 (按钮 上 文字 的 阴影 效果 颜色 )、Image 属性 (按钮 图 片 ) 和 
Background 属性 (按钮 背景 图 片 )。 








i*-m'- 11:34 AM wm ZRA F 11:35 AM = 


Button Button 


搜索 酒店 搜索 酒店 











图 6-21 设置 按钮 状态 案例 
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下 面 通过 一 个 示例 介绍 目 定 义 类 型 按钮 的 使 用 。 图 6-21 左边 是 默认 状态 的 搜索 酒店 
按钮 ,右边 是 高 亮 状 态 的 搜索 酒店 按钮 。 

从 图 6-21 可 见 这 个 搜索 酒店 图 片 是 不 同 的 ,它们 的 规格 相同 ,但 是 效 采 不 同 , 高 亮 状态 
就 是 按钮 被 按 下 的 状态 ,因此 这 个 按钮 图 片 被 设计 成 没有 阴影 的 效果 , 它 的 命名 是 search_ 
down. png。 我 们 也 需要 将 这 个 图 片 导 入 到 Xcode 工程 中 ,具体 步骤 参考 6.2.1. 

按钮 的 默认 状态 就 不 需要 设置 了 (在 6.2.1 节 已 经 介绍 了 ), 这 里 重点 介绍 高 亮 状 态 设 
置 ,如 图 6-22 所 示 ,在 State Config 中 选项 Highlighted 项 目 , 然 后 在 Image 中 选择 search. 
down. png 图 片 。 这 样 就 设置 成 功 了 。 

















& MainStory... : E View Cont. > © View Cont.. View Button ne mwo0 
Button 
| Type | Custom 
State Config Highlighted 
Title | Plain 
Highlighted Title 

Button —À 

Font System 15.0 [T]: 


Text Color | CZ Default 
Shadow Color | EEES | Default 








Image search down.png X 

Background | Highlighted Background Image ” 

| Shadow Offset 0.0 ||; 0.0 |:| 
7 A Width Height 


_] Reverses On Highlight 
Drawing |. | Shows Touch On Highlight 
if Highlighted Adjusts Image 
(VÍ Disabled Adjusts Image 
Line Break Truncate Middle 








Edge | Content 
Inset ol: 0; 
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Control 
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View Controller - A controller that supports 
the fundamental view-management model in 
iPhone OS. 

È = HH te BAMA = 3! 





图 6-22 ”设置 按钮 高 亮 状态 





按钮 的 不 同 状态 下 ,除了 可 以 设置 不 同 的 图 片 , 还 可 以 有 不 同 的 文字 ,以 及 不 同 的 文字 
的 颜色 和 背景 ,这 些 设置 我 们 就 不 一 一 介绍 了 ,设置 的 方法 与 上 面 的 案例 类 似 。 

提示 : 按钮 中 与 高 亮 状 态 类 似 的 属性 还 有 如 图 6-23 所 示 的 Drawing 属性 ,其 中 的 Reverses 
On Highlight 和 Shows Touch On Highlight 功能 ,使 用 后 , 单 击 按钮 也 出 现 不 同 的 效果 。 





|. | Reverses On Highlight 
Drawing | | Shows Touch On Highlight 

(Vf Highlighted Adjusts Image 

M Disabled Adjusts Image 


图 6-23 Hi^ GS BUR «Um TE 
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6.3 各 种 “ 栏 ” 


从 更 面 应 用 到 移动 平台 应 用 ,各 种 各 样 的 “ 栏 " 出 现在 我 们 的 应 用 中 ,有 状态 栏 、. 沫 单 栏 、 
工具 栏 、 导 航 栏 .标签 栏 操作 栏 和 搜索 栏 等 ,而 且 它 们 在 不 同 的 平台 之 间 也 有 一 些 差别 。 


6.3.1 状态 栏 


IOS 平台 中 的 状态 栏 一 般 出 现在 屏 才 顶部 , 它 包 含 网 络 情况 时间 .电量 、 信 号 强度 、 通 
知 等 用 户 需 要 的 信息 。 在 设计 沉浸 型 应 用 (如 游戏 ,视频 等 ) 的 时 候 为 了 增强 用 户 体 验 ,一 般 
需要 把 状态 栏 隐藏 起 来 ,而 其 他 情况 下 隐藏 状态 栏 承 要 导 重 考 睛 了 了。 状态 栏 上 放置 的 是 非 
党 重要 的 信息 ,轻易 不 能 占用 它 ,隐藏 之 后 的 状态 栏 要 能 够 适时 地 显示 出 来 。 

状态 栏 有 着 固定 的 高 度 20 点 ,可 以 设置 为 几 种 不 同 的 风格 ,如 图 6-24 Bros d 108 6 系 
统 状态 栏 风格 ,图 6-25 是 10S 7 系统 状态 位 风格 。 























Em iPhone 系统 默认 风格 状态 栏 


iPhone 系统 自 定义 风格 状态 栏 
pg 4:20 AM 








I iPad 系 统 默 认 风 格 状态 栏 


图 6-24 10S 6 系统 状态 栏 风格 


Carrier F 1:37 PM mm | 


iPhone 系统 黑色 文字 内 容 风格 状态 栏 





iPhone 系统 白色 文字 内 容 风格 状态 栏 


图 6-25 10S 7 系统 状态 栏 风 格 


IOS 7 系统 提倡 透明 状态 栏 , 透 过 状态 栏 可 以 看 到 后 面 的 控件 或 育 景 。iOS 7 中 有 两 种 








风格 (黑色 文字 内 容 和 白色 文字 内 容 ) ,其 中 黑色 的 文字 内 容 适 合 于 当 状 态 栏 后 面 的 内 容 是 
淡色 的 时 候 适 合 使 用 ,日 色 的 文字 内 容 适 合 于 当 状 态 柱 后 面 的 内 容 是 深 色 的 时 候 适 合 使 用 。 

在 10S7 中 设置 状态 栏 风格 可 以 通过 Xcode 设计 工具 和 代码 实现 。 

1. Xcode 设计 工具 

在 Xcode 设计 工具 中 打开 故事 板 文件 ,选择 视 几 控制 希 场 景 中 的 View Controller. 然 
后 在 右边 的 属性 检查 各 中 选择 Status Bar 为 Light ContentC EH && x ^r) ,如 图 6-26 Brzn 

在 Status Bar 属性 的 下 拉 列 表 中 (如 图 6-27 所 示 ), Default 为 黑色 文字 ,Light Content 
为 白色 文字 ,None 为 不 显示 状态 栏 。 

2. 通过 代码 设置 状态 栏 

如 条 上 面 的 通过 Xcode 设计 工具 不 能 修改 状态 栏 风 格 ,我 们 可 以 通过 代码 实现 。 

提示 : 事实 上 从 Xcode 4. 5 到 现在 Xcode5 版 本 ,这 种 通过 Xcode 设计 工具 一 直 都 不 能 
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图 6-26 WE i08 7 系统 状态 栏 风 格 


Status Bar | Light Content 


` 
` 
4 
i 
' 
r 
/ 
None F 
b 
inferred 
Default 


Y Light Content 


Black (Deprecated) 
图 6-27 ”状态 栏 属 性 的 下 拉 列 表 


修改 状态 栏 风 格 , 需 要 通过 代码 实现 。UI 设 计 师 一 面 对 代 码 就 会 “ 丈 二 和 尚 摸 不 到 头脑 ”， 
把 它们 看 成 是 "洪水 猛兽 ” ,其实 不 用 恶 慌 , 我 们 这 里 也 不 想 展 开 去 介绍 108 如 何 进行 代码 
编程 ,而 是 简单 地 告诉 大 家 几 行 固定 的 代码 ,只 需要 把 它 放 到 固定 的 地 方 就 可 以 了 。 

TE 10S 7 中 要 通过 代码 实现 设置 状态 栏 风 格 , 首 和 完 要 设置 Xcode 工程 属性 ,这 个 属性 是 
在 StatusBarSample-Info. plist 中 设置 的 , StatusBarSample-Info. plist 是 按照 二 xxx L f£ 44 > 
-Info. plist 命名 的 ,其 中 的 StatusBarSample 是 我 们 当前 的 Xcode 工程 的 名 ,plist 叫做 属性 
列表 文件 , 它 是 XML 格式 的 文件 ,在 iOS 和 Mac OS X 应 用 中 很 常用 。 这 个 文件 的 位 置 如 
图 6-28 所 示 。 

我 们 需要 打开 StatusBarSample-Info. plist 文件 ,如 图 6-29 所 示 , 右 键 弹出 采 单 ,选择 
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图 6-28 StatusBarSample-Info. plist 文件 


Add Row 染 单 项 ,可 以 在 属性 列表 文件 中 添加 一 行 。 然 后 在 添加 的 行 中 选择 View 
controller-based status bar appearance 属性 ,如 图 6-30 所 示 ,选择 好 这 个 属性 后 ,再 在 后 面 
的 Value 中 选择 No。 这 样 这 个 前 期 的 设置 工作 就 可 以 了 。 


JA Anforr 


Localization native development region 
Bundle display name 

Executable file 

Bundle identifier 

InfoDictionary version 

Bundie name 

Bundle OS Type code 

Bundle versions string, short 

Bundle creator OS Type code 

Bundle version 

Application requires iPhone environment 
Main storyboard file base name 

Main storyboard file base name (iPad) 


> Required device capabilities 
b Supported interface orientations 


> Supported interface orientations (iPad) 


图 6-29 


| 本 > [D StatusBarSample > |: StatusBarSam...» | Supporting Files) | | StatusBarSample-Info.plist ) No Selection 
Key 


Type Value 
String en o * mE 
String SIPRODUCT. NAME] ` 
Strina SIFXFCUTARIF NAME - 
Cut FT. NAME:rfc 1034identi | 
Copy , 
Paste b 


Shift Row Right 
Shift Row Left 





Value Type »l 
Add Row 

Show Raw Keys/Values 

Property List Type 

Property List Editor Help > 


在 属性 列表 文件 中 添加 行 
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Key Type Value 
Y Information Property List © Dictionary (17 items) 
Status bar is initially hidden String en v 
Status bar style String S(PRODUCT. NAME) N 
Status bar tinting parameters String S{EXECUTABLE_NAME} $ 
Supported external accessory protocols | String com.5 lwork6. SIPRODUCT NAME:rfc1034identifier) 
Supported interface orientations String 6.0 ` 
Supported interface orientations (iPad) String S|[PRODUCT. NAME] ^ 
Supported interface orientations (iPhone) | String APPL |! 
| Tools owned after installation String 1.0 1 
| URL types String nn i 
TVs we voee p appi U String L0 | 
Application requires iPhone environment Boolean YES : 
Main storyboard file base name String Main iPhone ; 
Main storyboard file base name (iPad) String Main iPad H 
> Required device capabilities Array (1 item) i 
> Supported interface orientations Array (3 items) 7 
> Supported interface orientations (iPad) Array (4 items) 7 


4 
Wo < | [$ StatusBarSample » MQ StatusBarSam... > Q Supporting Files) | | StatusBarSample*Info.plist ^ No Selection 


Key Type Value 
Y Information Property List Dictionary (17 items) 
























Localization native development region en 
Bundle display name String S[PRODUCT NAME) 


String 


6-30 ”设置 属性 列表 文件 View controller-based status bar appearance 内 容 


设置 好 属性 列表 文件 后 ,就 可 以 在 程序 中 添加 代码 了 。 我 们 在 Xcode 界面 设计 的 场景 
中 看 到 的 视图 控制 器 (图 6-31 Brzs QD ,在 工程 中 都 有 视图 控制 器 文件 (图 6-31 所 示人 ) 与 
之 对 应 ,而 每 一 个 视图 控制 义 管 理 这 一 个 视图 (图 6-31 所 示 @), 视 图 与 界面 对 应 (图 6-31 
所 示 由 ) 。 因 此 在 视图 控制 器 ViewController. m 可 以 控制 界面 (图 6-31 所 示 由 ) ,当然 可 以 
控制 它 的 状态 栏 显示 的 风格 了 ,我 们 需要 在 ViewController. m 编写 代码 。 

打开 ViewController. m 代码 找到 viewDidLoad 方法 ,添加 代码 如 下 . 


— (void)viewDidLoad 


{ 
[super viewDidLoad]; 
// 添 加 代码 
[ [UIApplicationsharedApplication | 
setStatusBarStyle:UIStatusBarStyleLightContent |; 
j 


其 中 [ UIApplication sharedApplication |setStatusBarStyle; UIStatusBarStyleLightContent | 语 
句 是 我 们 添加 的 , 它 是 设置 状态 栏 为 Light Content( 白 色 文 字 ) 风 格 , 如 果 想 设置 状态 栏 为 
色 文 字 风 格 , 可 以 使 用 语句 [UIApplication sharedApplication | setStatusBarStyle: 


第 6 章 ”使 用 标准 控件 | 





Ez aáðóáð =. Bm 器 | 可 N StatusBarSample ) 上 Statu = Main = Main [Bl View Controller Scene > (9 View Controller 
v | "nsa v E view Controller Scene 
= 2 targets, i05 SOK 7.0 
v Ci StatusBarSample 7 ILU 
h AppDelegate r Tòp Layout Guide e) | 


m AppDelegate.m Bottom Layout Cuide 
= à View De 
= Main, iPad.storyboard @ First Responder 713) 
h| ViewController.h Be 
m ViewController.m — 
3 Images.xcassets | 1 ) 
v |... Supporting Files 
StatusBarSample-Info.plist 
InfoPlist.strings 
m main.m 
hi StatusBarSample-Prefix.pch 
bp StatusBarSampleTests 
| frameworks 
> |; Products 








" 


è IE tH te: EFIA = 


图 6-31 WAIE hl Ar XTM K A 


UIStatusBarStyleDefault |, 
如 果 还 有 其 他 的 界面 需要 设置 状态 栏 风 格 , 只 需要 在 它 对 应 的 视图 控制 各 
viewDidLoad 中 添加 上 面 代码 就 可 以 了 。 


6.3.2 工具 栏 


iOS 平台 有 3 个 最 常用 的 “ 栏 ”, 即 工具 栏 、 导 航 栏 和 标签 柱 。 工 具 栏 和 导航 栏 的 高 度 是 
一 样 的 ,都 是 44 点 (88 像素 ) ,而 标签 栏 高 度 是 49 点 (98 像素 )。 

工具 栏 主要 应 用 在 当前 屏 雄 中 的 操作 处 理 , 没 有 导航 和 屏 句 跳 转 功能 。 在 iPhone 中 ， 
工具 栏 一 般 是 在 屏幕 的 底部 ( 见 图 6-32), mi iPad 中 的 工具 栏 一 般 是 在 屏幕 的 顶部 ( 见 
图 6-33) .在 iPhone 中 由 于 屏 篆 空间 所 限 , 工 具 栏 中 的 控件 不 能 过 多 ,其 中 的 按钮 数 不 能 起 
过 5 个 ,如 采 超 过 5 个 , 则 第 5 个 按钮 ( 即 最 后 一 个 ) 要 设 为 "更 多 ”。 

下 面 通过 一 个 实例 介绍 一 下 在 Xcode 5 中 添加 工具 栏 , 如 图 6-34 所 示 , 其 中 工具 栏 中 
有 Save 和 Open 两 个 按钮 。 

再 看 看 案例 的 实现 过 程 。 使 用 Single View Application 模板 创建 一 个 名 为 ToolbarSample 
的 工程 。 打 开 Main. storyboard 设计 界面 , 摆 放 两 个 按钮 控件 ,如 图 6-35 所 示 , 从 对 象 库 中 
拖 电 一 个 Toolbar 到 设计 界面 底部 并 将 其 摆 放 到 合适 的 位 置 。 如 有 果 需 要 再 添加 按钮 到 工具 
栏 , 如 图 6-36 所 示 ,在 对 象 库 中 找到 Bar Button Item 控件 , 拖 忠 到 Toolbar 中 。 
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图 6-32 iPhone 中 的 工具 栏 
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图 6-33 iPad 中 的 工具 栏 ( 左 图 是 10S 6 工具 栏 , 右 图 是 i9S 7 工具 栏 ) 





HEX. 工具 栏 中 不 能 是 6.2 54-2848] Button 控件 ,必须 是 Bar Button Item 控件 , 它 
以 放 在 工具 栏 和 导航 栏 中 ,而 Button 控件 不 能 放 到 工具 栏 和 和 导航 栏 中 。 

从 图 6-36 中 可 以 看 到 ,两 个 Item 距离 太 近 ,我 们 想 让 它们 中 间 浴 加 一 些 空间 ,添加 空 
间 有 两 种 形式 : 固定 空间 (Fixed Space Bar Button Item) 和 可 变 空 间 (Flexible Space Bar 
Button Item) ,它们 的 作用 是 在 各 个 按钮 之 间 插 入 空间 。 图 6-37 Brom dE nI AE as qu] su 
工具 栏 。 
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Save Open 
图 6-34 工具 栏 实例 


' [Š wain.story... > [B] View Contr... > @ View Contr... > |_| View > | Toolbar | DEEP PPO 
Toolbar 
Style | Defaut — — £) 
(M Translucent 


Bar Tint | C= | Default :| 








View 
Mode | ScaleToFill — £] 
"|  olJ 
Interaction (MÍ User Interaction Enabled 
[C] Multiple Touch 
Alpha 1l) 


Background | C= | Default —  :| 
Tint | EE | Default $| 
Drawing |_| Opaque — | | Hidden 
[C] Clears Graphics Context 
L Clip Subviews 
(VÍ Autoresize Subviews 





an editable search bar... 








Toolbar - Provides a mechanism 
for displaying a toolbar at the 
| Eet bottom of the screen. 





Bar Button Item - Represents an 


ano | item on a UlToolbar or 





图 6-35 {i Bf LH SH COLE 
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Sye|Bodeed :| 
Tim | CŒ Defaut 0 05 














图 6-36 ”添加 按钮 到 工具 栏 


ve. ^| View? | Toolbar ) 六 Bar Button Item - Flexible Space DBs' 05209 


dentifier LFlexible Space — à i] 
Tw C Defaut + 


ltem $s tem 





图 6-37 RITE S ATA 
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如 果 和 需要 将 右边 的 Item 按钮 设置 为 Open, 那 么 如 图 6-38 所 示 选 择 右边 Item 按钮 , 打 
开 右 边 的 属性 检查 带 ,找到 Bar Item Title 属性 ,输入 “Open”, 这 样 右边 的 Item 按钮 标题 
WAER Open T. 
















& view... View Toolbar Bar Button Item - Open D B w 9 oO 
| Bar Button Item 
Style | Bordered $ | 
Identifier | Custom : | 
Tint | C | Default * | 


E view... 














Bar Item 
Title Open 
Image Md 
Tag 0 [> 
(VÍ Enabled 


Dt) o E 


Fixed Space Bar Button Item - 
LLILLLIL || Represents a fixed space item on 
à UlToolbar object. 





Item 全 





Flexible Space Bar Button 
和 +| Item - Represents a flexible 
space item on a UlToolbar object. 





图 6-38 设置 右边 Item 按钮 属性 


但 是 如 果 需 要 将 左边 的 Item 按钮 设置 为 Save, 就 不 能 按照 Open 按钮 设置 方法 来 设置 
了 ,这 是 因为 Save 按钮 在 10S 的 工具 栏 \、 导 航 栏 和 标签 栏 中 有 一 些 系统 图 标 样式 的 按钮 ,这 
些 样式 的 按钮 有 大 固定 用 途 , 不 能 挪 作 他 用 ,如 四 按钮 代表 撰写 邮件 ,这 是 10S 平 台 的 设计 
规范 。 

选择 工具 栏 左边 的 Item 按钮 ,在 属性 检查 硕 中 找到 Bar Button Item 中 的 Identifier 属 
性 ,如 图 6-39 所 示 , 在 末 单 中 选择 Save, 这 个 菜单 中 的 菜单 项 都 是 苹果 公司 定义 好 图 标 样式 
的 按钮 ,都 有 痢 特 殊 的 售 义 。 
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Play 


Fast Forward 


Page Cur! 


图 6-39 ”设置 Item 按钮 Identifier 属性 


6.3.3 FA 


IOS 中 导航 栏 位 于 屏幕 的 顶部 ,分 为 左 . 中 、 右 3 个 区 域 ,左右 区 域 放置 控件 ,中 间 区 域 
一 般 是 标题 。 导 航 栏 主要 应 用 于 树 形 结构 导航 和 模 态 视 几 中 。 在 树 形 结构 导航 中 ,导航 栏 
如 图 6-40 所 示 ,在 一 级 视图 界面 中 导航 栏 一 般 不 要 设置 左右 控件 ,只 有 标题 就 可 以 了 。 
图 6-41 是 在 二 级 、 三 级 视图 界面 中 左边 的 按钮 必须 是 返回 上 一 级 按钮 ,不 要 挪 作 他 用 ,而 右 
边 的 控件 则 是 与 当前 界面 相关 操作 。 
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图 6-40 10S 树 形 结构 一 级 视图 中 的 导航 栏 
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(a) iOS 6 风格 


图 6-41 
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(b) iOS 7 风格 


iOS 树 形 结构 二 级 视图 中 的 导航 栏 


图 6-42 展示 的 是 模 态 视图 中 的 导航 栏 使 用 ,这 种 情况 下 左边 需要 有 一 个 取消 操作 的 按 
钮 ,没有 这 个 按钮 用 户 将 无 法 关闭 模 态 视图 ,右边 需要 有 一 个 确定 操作 的 按钮 ,从 人 体 工程 
学 角度 考虑 ,右边 的 按钮 更 方便 操作 。 有 关 模 态 视图 导航 的 介绍 会 在 第 7 ANA. 
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下 面 通过 一 个 实例 介绍 在 Xcode 5 中 添加 导航 栏 , 如 图 6-43 所 示 ,在 导航 栏 中 ,共有 两 
个 按钮 Save 和 十 ,界面 中 央 有 一 个 标签 。 这 里 的 Save 和 十 按钮 都 是 10S 系统 提供 的 标准 
按钮 。 


Carrier F 8:52 AM um 


Save Title 十 


图 6-43 ”导航 栏 实例 


下 面 看 看 案例 的 实现 过 程 。 使 用 Single View Application 模板 创建 一 个 名 为 
NavigationBarSample 的 工程 。 Main. storyboard 设计 界面 , 摆 放 两 个 按钮 控件 ,如 
图 6-44 所 示 , 从 对 象 库 中 拖 电 一 个 NavigationBar 到 设计 界面 顶部 ,如 果 需 要 再 添加 按钮 到 
导航 栏 , 如 图 6-45 所 示 ,在 对 象 库 中 找到 Bar Button Item 控件 ,分 别 拖 忠 两 个 控件 到 
NavigationBar 左右 两 边 

Ban 右边 T Item 按钮 设置 为 十 , 则 如 图 6-46 Brzs ,选择 右边 Item 按钮 ,在 属性 

谷中 找到 Bar Button Item 中 的 Identifier 属性 ,选择 为 Add。 用 同样 的 方法 选择 左边 
的 Item 按钮 的 Identifier 属性 Save。 

由 于 状态 栏 是 透明 的 ,导航 栏 如 采 位 置 徘 上 对 齐 , 就 会 与 状态 位 重 辣 。 我 们 需要 调整 导 
航 栏 的 位 置 ,如 图 6-47 Brzs Xe PE SE UE: «3T T J.T T di View. WB. Y DN 20.20 点 是 状 
态 栏 的 高 度 。 
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图 6-45 添加 按钮 到 导航 栏 
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图 6-46 ”设置 Item 按钮 Identifier 属性 
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图 6-47 设置 导航 栏 位 置 
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6.3.4 标签 柱 


IOS 的 标签 栏 位 于 屏 融 的 压 部 , 它 的 用 途 就 是 实现 标签 导航 ,以 及 实现 应 用 中 功能 模块 
的 切换 ,不 应 该 用 于 其 他 的 目的 。 要 注意 工具 栏 和 标签 栏 的 区 别 ,工具 栏 天 注 的 是 当前 界面 
的 操作 , 它 的 操作 按钮 中 不 能 有 屏 疾 的 切换 ,而 标签 栏 关 注 的 是 整体 导航 ,会 有 屏幕 的 切换 。 
同时 ,标签 栏 也 不 能 出 现在 模仿 视图 中 。 

在 iPhone 中 标签 栏 应 该 位 于 屏幕 的 下 方 , 占 有 49 点 的 高 度 的 屏 民 空间 ,同时 ,为 了 单 
击 方便 标签 栏 中 的 标签 不 能 超过 5 个 ,如 采 超 过 5 个 则 把 最 后 一 个 设置 成 “更 多 ”, 这 样 可 以 
单 击 “更 多 ”标签 出 现 更 多 的 列表 (如 图 6-48 所 示 )。 如 采 同 时 震 要 工具 栏 和 标签 栏 的 时 候 ， 
由 于 屏幕 大 小 所 限 最 好 适时 地 隐藏 标签 栏 。 注 意 这 些 限制 并 不 针对 iPad, 




















iPod F " 9:50 X T 
更 多 编辑 
J 
cf 风格 》 Am 
选集 
3 ox 
作曲 者 
和 ”作曲 者 》 
32:05 mn 2476 
”播放 列表 AUR TË tl 更 多 
(a) IOS 6 风 格 (b) iOS 7] d ka 


图 6-48 iPhone 上 的 “音乐 ”应 用 


下 面 通过 一 个 实例 介绍 在 Xcode 5 中 添加 标签 栏 ,如 图 6-49 所 示 ,在 标签 栏 中 共有 5 
个 标签 ,界面 中 有 一 个 背景 图 片 , 图 片 延伸 到 标签 栏 后 面 , 从 图 中 可 见 在 1i9S 7 之 后 标签 栏 
是 半 透 明 的 ,我 们 可 以 隐约 看 到 背景 。 在 5 个 标签 中 除了 CountDown ,其 他 的 4 个 标签 网 
标 都 是 IOS 系统 提供 的 标准 图 标 , 它 们 有 者 特 殊 的 含义 不 能 挪 为 他 用 。 

本 案例 需要 设计 师 设 计 背 景 图 片 , 它 的 高 和 宽 的 尺寸 是 568X320 点 ,视网膜 显示 屏 尺 
二 是 640X1136 像素 。 此 外 ,还 需要 设计 标签 中 CountDown 标签 图 标 ,普通 屏 间 尺寸 是 
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30X30 像素 ,文件 命名 CountDown. png; 视网膜 显示 屏 使 用 的 图 片 尺 寸 是 60X 60 像素 , 文 
件 命 名 为 CountDown(22x. png, 图 标的 设计 不 应 该 添加 任何 的 设计 效果 ,图 像 需 要 保存 成 
HERIK png 文件。 

图 片 设计 好 之 后 需要 把 它 导入 到 Xcode 工程 中 ,添加 到 工程 的 具体 步骤 是 在 工程 导航 
面板 中 ,右键 选择 TabBarSample 工程 名 ,弹出 右键 菜单 如 图 6-50 所 示 。 





í spe emm uj 
ET ShowinFinder — 
|h) AppDelegi Open with External Editor $ 
im] AppDelegi Open As b 
[5 Main.story Show File Inspector i 
Ih) ViewContr 


New File... m 


b | jTabBarSampl Dele 


b. Frameworks 

» |. Products New Group 
New Group from Selection 
Sort by Name 
Sort by Type 





Find in Selected Groups... 


Yr E Q) (i ls TE | Source Control > 


Favorites Search History CouniDo wn More project Navigator Help b 
图 6-49 ”标签 栏 实例 图 6-50 添加 图 片 文件 到 工程 


Ye TE SE UP BJ Add Files to“TabBarSample”… 弹 出 选择 文件 对 话 框 ,如 图 6-51 所 示 ， 
选择 要 添加 的 文件 夹 images, TE Destination 中 选中 Copy items into destination group's 
folder(if needed) ,这 个 选择 可 以 使 文件 夹 从 原始 位 置 复 制 到 工程 目录 中 。 在 Add to targets 
中 勾 选 TabBarSample ,这 个 选择 可 以 使 这 些 资 源 文 件 编译 到 TabBarSampleTARGETS +F, pa 
产品 一 切 发 布 。 

图 卢 成 功 添加 到 工程 中 后 , 束 可 以 设置 背景 图 片 了 ,如 图 6-52 所 示 . Mou de Pe rp di S — 
个 Image View 到 设计 视图 。 然 后 ,选择 Image View 打开 属性 检查 硕 , 和 再 选择 Image View 
Image, 设置 属性 为 Home-bg. png, 如 图 6-53 所 示 。 

然后 ,再 谎 加 标签 栏 到 视 网 上 ,如 图 6-54 rz . MXIT d PE P ia R41 Tab Bar 到 设计 视 
图 。 再 从 对 象 库 中 拖 虹 3 个 Tab Bar Item 到 标签 栏 , 如 图 6-55 所 示 。 
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图 6-51 选择 文件 夹 对 话 框 


oryboard | [É Main.storyboard (B... > [B view Controller Scene > @) View Controller |. | View DESSO 











Ulimaga Viw 





图 6-52 {i Image View 到 设计 视图 
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图 6-53 ”设置 Image View [Al Fr 
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图 6-54 íi, Tab Bar 到 设计 视图 
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图 6-56 ”设置 Search 标签 Identifier 属性 
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选择 标签 栏 第 二 个 标签 ,在 属性 检查 需 中 找到 Tab Bar Item 中 的 Identifier 属性 ,如 
图 6-56 所 示 , 从 下 拉 亲 单 中 选择 Search ,这 些 沫 单 中 的 选项 都 是 10S 系统 提供 的 标准 图 标 。 
使 用 类 似 的 方法 设置 第 3 个 标签 为 History, 具 体 细节 就 不 再 介绍 了 。 

而 第 4 个 标签 不 是 OS 系统 定义 好 的 图 标 , 是 自己 定义 的 CountDown, 选 择 标 签 柱 第 
4 个 标签 ,在 属性 检查 天 中 找到 Bar Item 中 的 Tile 属性 设置 为 CountDown, Image 属性 设 
置 为 CountDown. png, th BI 6-57 所 示 。 


& Main.... > [Bl view... > @ view... ^| View>|, Tab Bar > =] Tab Bar Item - CountDown DBgBa mo 
| Tab Bar Item 
Badge | 


identifier | Custom 
Title | Default Position $ 





| Bar Item 
Title | CountDown 
mage|CounDownpng |v 
Tag 
(M Enabled 


.BD i!) e m 


Flexible Space Bar Button 
do^ Item - Represents a flexible 
space item on a UlToolbar object. 


Tab Bar - Provides a mechanism 
for displaying a tabs at the bottom 
* ^ ofthe screen. 








| Tab Bar Item - Represents an 





图 6-57 设置 标签 属性 





这 样 ,案例 介绍 完成 了 ,如 果 需 要 改变 标签 栏 风 格 ( 标 签 栏 有 两 种 风格 可 供 选 择 ) ,可 以 
选择 设计 视图 中 的 标签 栏 ,在 属性 检查 大 中 找到 Tab Bar 中 的 Style 属性 设置 为 Black, 如 
图 6-58 Birzn 
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图 6-58 设置 标签 栏 风 格 


6.3.5 ”搜索 栏 和 搜索 范围 选择 栏 


当 应 用 中 有 大 量 的 数据 需要 展示 给 用 户 的 情况 下 ,需要 在 应 用 中 设置 搜索 功能 。 搜 索 
栏 可 以 帮助 我 们 实现 这 个 功能 ,然而 只 有 OS 提供 了 实 实在 在 搜索 栏 和 范围 选择 栏 控件 ， 
Android 和 Windows Phone 平台 没有 相关 的 搜索 控件 ,但 是 它们 也 提供 了 标准 的 解决 
方案 。 

IOS 平台 提供 的 与 搜索 相关 的 栏 有 两 个 : 搜索 栏 和 范围 选择 栏 ,如 图 6-59 所 示 ,它们 的 
高 度 都 是 44 点 ,为 了 提示 用 户 ,搜索 栏 中 可 以 设置 提示 信息 ,而 且 搜 索 栏 后 面 还 可 以 设置 其 
他 形式 的 按钮 。 范 围 选 择 栏 是 为 搜索 时 候 指 定 搜索 的 范围 , 它 与 搜索 栏 "形影不离 ”, 在 屏 戎 
空间 比较 狭 罕 的 情况 下 , 它 会 位 于 搜索 栏 的 下 方 , 而 在 屏幕 空间 比较 大 的 情况 下 , 它 位 于 搜 
索 栏 的 右边 。 搜 索 栏 形式 上 与 iOS 的 分 段 控件 类 似 , 在 iPhone 中 一 般 个 数 不 要 超过 5 个 ， 
最 后 一 个 段 应 该 设置 为 “全 部 ”。 
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am OBE [上 am -— ca 
iOS 6 中 的 搜索 栏 —3 。 iOS 6 中 的 带 有 范围 选择 栏 的 搜索 栏 ( 横 屏 ) 
iOS 6 中 的 带 有 范围 选择 910 A FACE DE) 
| ZIT EN | EN — 07 


iOS 7 中 的 搜索 栏 ER > | iOS 7 中 的 带 有 范围 选择 栏 的 搜索 栏 ( 横 屏 ) 


iOS 7 中 的 市 有 范围 选择 栏 的 搜索 栏 ( 竖 屏 ) 


图 6-59 105 搜索 栏 和 范围 选择 栏 





iOS 的 不 同 设备 GiPad 和 iPhone) 中 的 搜索 栏 使 用 也 有 一 些 区 别 。 基 于 屏幕 太 才 的 考 
J& . TE iPhone 中 搜索 栏 应 该 位 于 内 容 视 图 上 ,并 随 者 内 容 视 图 的 深 动 而 深 动 ,而 不 应 该 固定 
于 屏幕 之 上 ,否则 你 可 以 操作 的 空间 就 会 太 小 ,网 6-60 展示 的 是 iPhone 中 邮件 应 用 的 搜索 
栏 , 它 会 随 着 下 面 的 邮件 列表 一 起 深 动 ,同样 的 邮件 应 用 在 iPad 中 就 不 是 这 样 设计 的 (如 
图 6-61 所 示 ) 。 
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图 6-60 iPhone(OS 7) 中 邮件 应 用 搜索 栏 





dd, E 人 够 展示 更 多 的 搜索 结果 ,在 呈现 搜索 栏 的 时 候 , 会 把 导航 栏 隐藏 起 来 ,如 图 6-62 所 示 。 


介绍 搜索 栏 和 搜索 范围 选择 栏 中 与 设计 师 有 关 的 一 些 属性 : 
dcin EM ,该 值 的 内 容 将 作为 灰 字 提示 显示 在 文本 框 中 , 当 文本 框 获得 焦点 
时 ,提示 文字 消失 。 
Style( 样 式 ) 属 性 ,可 以 设置 搜索 栏 的 样式 ,默认 是 灰色 样式 ,还 可 以 设置 成 黑色 样式 。 
Options( 选 项 ) 属 性 ,该 属性 可 以 设置 搜索 栏 构成 , 表 6-1 说 明了 搜索 栏 构成 与 这 些 
选项 设置 之 间 的 关系 。 
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图 6-61 iPad(iOS 7) 中 邮件 应 用 搜索 栏 
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图 6-62 iPhone(GiOS 7) 中 搜索 栏 呈现 时 隐藏 导航 栏 
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表 6-1 搜索 栏 构 成 说 明 
说 明 








基本 搜索 栏 ( 上 面 是 iOS 6 风格 ,下 面 是 iOS 7 风格 ) 


带 有 查询 结果 按钮 的 搜索 栏 ( 上 面 是 1OS 6 风格 ,下 








q ; — — jt 
es E., iiA iOS 7 风格 ) 。 显 示 最 近 搜 索 结果 ,显示 设 定 如 
VN e 图 6-63 BT zm. 选中 Options F Hy Show Search 
: Results Button 复 选 框 
Fa eJ 这 有 书签 按钮 的 搜索 栏 。 显 示 用 户 收 藏 的 书签 列 


表 , 显 示 设 定 如 图 6-63 所 示 , 选 中 Options 中 的 
— Shows Bookmarks Button 复 选 框 


带 有 清除 按钮 和 取消 按钮 的 搜索 栏 。 显 示 设 定 如 图 
6-63 所 示 ,选中 Options 下 的 Shows Cancel Button 
复 选 框 

















带 有 Scope 的 搜索 栏 。 显 示 设 定 如 图 6-63 所 示 , 选 
中 Options 下 的 Shows Scope Bar 复 选 框 , 同 时 需要 
设 定 下 面 的 Scope Titles。 选 中 这 个 选项 时 ,搜索 栏 
一 出 现 ,就 会 在 下 面 显示 Scope Titles 
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图 6-63 JERII ERA Ar 
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下 面 通过 一 个 实例 介绍 一 下 在 Xcode 5 中 添加 搜索 栏 , 如 网 6-64 rz ,在 搜索 栏 输入 
内 容 后 ,搜索 范 于 选择 栏 也 会 出 现 ,搜索 范 围 选 择 栏 有 三 个 选择 按钮 (英文 .中 文 和 ALL)。 





Carrier ^ 3:24 PM gem Carrier ^ 3:24 PM 
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图 6-64 搜索 栏 实 例 


下 面 看 看 案例 的 实现 过 程 。 使 用 Single View Application 模板 创建 一 个 名 为 
SearchBarSample 的 工程 。 打 开 Main. storyboard 设计 界面 ,选中 设计 视图 中 的 View 
Controller, 单 击 delete 键 删 除 这 个 视图 控制 着 ,然后 重新 从 对 象 库 中 拖 遇 一 个 Table View 
Controller 到 设计 视图 中 ,如 图 6-65 所 示 。 这 是 因为 默认 的 Single View Application 模板 
的 视图 控制 硕 是 善 通 的 视图 控制 顶 ,而 搜索 栏 需 要 表 视 图 控制 。 

Ja BEMOS AS E rh dt RA Search Bar 到 设计 视图 中 ,如 图 6-66 所 示 TE XXE di 8218 
RFID] BST foe . SE di Ha, eL A E M s fp A Ze ELT RS Tr. fii HJ Search Bar and Search 
Display Controller th, nf LJ dà R — AI 28 F5. fi] Search Bar and Search Display Controller 可 
以 自动 隐藏 和 显示 搜索 访问 选择 栏 。 

我 们 需要 设置 搜索 栏 的 属性 ,如 图 6-67 所 示 , 在 属性 检查 器 中 设置 Placeholder 属性 为 
Search. Æ Options 属性 中 勾 选 Shows Scope Bar ,然后 在 Scope Titles 中 点 击 “ 十 ”添加 “中 
XC UXORI ALL", 
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Maim.storyboard > | Nain storyboard (Base) ) No Seiection Dg s e 0 
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- Search Bar With Scope Bar 
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=) Main... — Table View ) | 


| Search Bar 





Text | 


Placeholder (Search 


Prompt 








Style | Default 
区 Translucent 
Prototype Cells Bar Tint | C | Default 





Background - 
Scope Bar | | 





Search Text | Default Position $ | 
Background | Default Position $| 








Options | Shows Search Results Button 
| | Shows Bookmarks Button 




















Kevboard | Default S| 


< Navigation Item - Represents a state of the 
navigation bar, including a title. 


| Search Bar - Displays an editable search 
bar, containing the search icon, that sends an 
action message to à target object when.. 





” “© -—m 
Controller - Displays an editable search bar 
| connected to a search dis controller for... 
图 6-67 设置 搜索 栏 属性 


注意 : Options Æ% PE P 4] 3€ Shows Scope Bar 的 时 候 在 界面 显示 的 时 候 搜 索 栏 和 搜索 
选择 栏 同 时 显示 ,如 果 去 掉 勾 选 Shows Scope Bar, 在 界面 显示 的 时 候 搜 索 范围 选择 栏 
示 , 只 有 当 搜 索 栏 输入 内 容 时 候 才 会 出 现 搜 索 范 围 选 择 栏 。 





使 用 滑 块 控件 能 够 选取 一 个 连续 区 域 范 围 内 的 值 。 例 如 通过 滑 块 调 市 设置 首 量 、 屏 大 
这 度 等 值 。 根 据 应 用 的 需要 滑 块 控件 可 以 垂下 或 者 水 平 放置 ,但 水 平 放 置 更 符合 使 用 习惯 

图 6-68 展示 的 是 IOS 的 视频 播放 应 用 ,在 应 用 后 两 处 使 用 了 滑 块 控件 ,顶部 导航 栏 中 
的 请 块 控件 可 以 指示 视频 的 播放 进度 ,并 通过 拖 鼻 改 变 。 下 面 播放 控件 栏 中 的 滑 块 可 以 调 
TUUS PEE, 

A Y RH KUNBU AE 57; E . np ELTE TR Et fu TF HR VA s ds AI ESL ps CRI E] 6-69. 所 示 )， 
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15:12 


| 


"| COMUNI 
I v — 





图 6-68 10S 视频 播放 应 用 


当然 图 标 与 滑 块 控件 没有 必然 联系 。 此 外 ,还 可 以 改变 清 块 的 样式 ,包括 轨道 、 圆 钮 的 样式 
都 可 以 改变 ,图 6-70 展示 的 是 修改 了 上 默认 风格 的 滑 块 控 件 。 


4 mm 4) 
(a) iOS 6JXl fà 

- [Lm 4) 
(b) iOS 7 风格 


图 6-69 10S 添加 图 标的 滑 块 控件 


C 上 午 11:25 


LIE D jur 
LL ERORE 





图 6-70 ”修改 了 iOS BA ER YE URS BH ER f f 
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下 面 介 绍 滑 块 控件 (slider) 中 与 设计 师 有 关 的 一 些 属性 : 
m Value 属性 ,在 Value 属性 中 的 Minimun 是 最 小 值 , Maximum 是 最 大 值 ,Current 是 
当前 值 。 
m Min Image 属性 ,最 小 值 图 片 属性 。 
m Max Image 属性 ,最 大 值 图 片 属性 。 
注意 :设计 师 在 设计 最 小 值 图 片 和 最 大 值 图 片 时 ,图 片 的 规格 没有 严格 的 限制 ,文件 格 
式 为 PNG。 之 后 不 要 忘记 把 这 些 图 片 导 入 到 Xcode 工程 中 。 


6.5 选择 控件 


设计 和 开发 移动 设备 应 用 的 时 候 , 应 该 尽量 减少 用 户 输入 ,一 方面 是 设备 屏 闪 尺寸 小 不 
方便 输入 , 男 一 方面 是 因为 输入 需要 验证 内 容 的 正确 性 。 因 此 ,应 该 尽 可 能 使 用 这 些 选 择 控 
件 ,选择 需要 的 内 容 。 与 选择 相关 的 控件 有 二 选 一 . 单 选 和 多 选 等 形式 ,以 及 拾取 器 控件 
(Picker), 

6.5.1 二 过 一 


在 iOS 平 人 台 里 能 实现 二 选 一 功能 的 只 有 开关 控件 ,如 图 6-71 所 示 。 不 要 试图 去 寻找 或 
使 用 其 他 平台 的 复 选 框 形式 的 控件 ,这 会 使 你 的 应 用 变 得 不 伦 不 类 ，。 


cer. «€» 


(a) IOS 6 风格 








OFF 


(b) iOS 7 风格 
图 6-71 iOS 开关 控件 


下 面 介 绍 开 关 控 件 (switch) 中 与 设计 师 有 关 的 一 些 属性 : 

m State 属性 ,设置 开关 控件 的 状态 ,On 为 开 状 态 ,Off 为 关 状 态 。 
m On Image 属性 ,设置 开 状 态 时 候 的 图 片 。 

m Off Image 属性 ,设置 关 状 态 时 候 的 图 片 。 


6.5.2 单 选 控件 


顾名思义 ,就 古 从 一 组 选项 中 选择 一 个 ,不 能 多 选 , 而 同一 组 中 的 选项 是 互 不 的 ,这 种 控 
件 又 叫做 “收音 机 按钮 , 按 下 一 个 其 他 的 按钮 就 会 弹 起 。 对 于 收音 机 按钮 ,每 一 个 平台 都 是 
一 个 控件 与 之 对 应 。 

在 10S 平 台中 的 收 首 机 按钮 被 称 作 “ 分 段 控件 ”, 它 的 默认 样式 如 图 6-72 左 图 所 示 , 这 
JE IOS 6 风格 的 分 段 控 件 ,图 6-73 是 10S 7 届 平 化 风格 的 分 段 控 件 。 

Æ iOS 6 中 还 可 以 将 分 段 控件 放置 在 工具 栏 . 导航 栏 中 ,图 6-74 展示 的 是 iPhone 邮件 
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应 用 中 把 分 段 控 件 放 置 在 导航 栏 中 的 实例 。 


(a) 默认 样式 (b) 图 标 样 式 (c) 工具 栏 样式 
图 6-72 iOS 6 分 段 控件 


(a) 默认 样式 (b) 图 标 样式 
图 6-73 iOS 7 分 段 控件 
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图 6-74 Æ 10S 6 导航 栏 中 使 用 分 段 控件 


图 6-75 所 示 是 分 段 控 件 (Segmented Control) 的 属性 检查 上 器 ,下 面 介 绍 分 段 控件 中 与 设 
计 师 有 关 的 一 些 属性 : 

m Style 属性 ,设置 分 段 控 件 的 样式 ,在 10S 7 之 后 这 个 属性 不 起 作用 了 。 

m Segments 属性 ,设置 分 段 控 件 中 段 的 个 数 。 

m Segment 属性 ,可 以 选择 具体 哪些 一 个 段 ,然后 设置 各 个 段 的 属性 。 

m Title 属性 ,是 指 在 Segment 中 选择 的 段 的 标题 。 

m Image 属性 ,是 指 在 Segment 中 选择 的 段 的 图 片 。 
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Styie | Plain 
State Momentary 
Segments 3l. 
Segment | Segment 0 - 1 , 
Image mage | 
Behavior (VÍ Enabled — (VÍ Selected 
Content Offset 0. 0; 
X Y 


图 6-75 分 段 控件 属性 检查 从 


6.5.3 多 选 控 件 

多 选 控件 可 以 使 用 户 在 多 个 选项 中 进行 选择 ,选择 的 个 数 是 不 定 的 。Android 和 
Windows Phone 平台 都 是 使 用 多 个 复 选 框 实 现 。 而 iOS 平 台 没 有 复 选 框 控件 ,我 们 可 以 借 
助 表 视 图 ,将 表 视 图 的 单元 格 设置 为 被 选中 标志 W ( 见 图 6-76). 


wu 


移动 平 合 选择 


32 PM 


选择 你 擅长 的 移动 平台 





Repeat alarm 


iOS v 


E Mond 
very Monday Pe p 


Every Tuesday Windows Phone 
Every Wednesday 
Every Thursday 
Every Friday 
Every Saturday 
Every Sunday 


Cancel 





(a) Android 平 台 (b) Windows Phone 平 台 (c) IOS 平 台 


图 6-76 Android ?E & BJ Ze 3€ fs fF, Windows Phone 平 台 的 
多 选 控件 以 及 OS 平台 使 用 表 视 图 实现 多 选 的 方式 
设置 图 6-76 中 10S 平台 的 多 选 界 面 涉及 表 视 图 的 相关 知识 ,本 节 暂 时 介绍 具体 的 设置 
步骤 ,我们 会 在 后 面 “ 表 视图 ”的 内 容 后 面 做 详细 的 介绍 。 
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6.5.4 拾取 器 


拾取 需 (Picker) 是 封装 好 的 选择 控件 ,我 们 选择 时 间 和 日 期 的 时 候 可 以 采用 时 间 拾 取 
器 和 日 期 拾取 顺 , 对 于 一 些 普 通 的 选择 信息 也 可 以 使 用 普通 拾取 需 探 件 。 

1. 普通 拾取 器 

普通 拾取 器 (Picker View) 一 般 可 以 选择 少量 的 列表 信息 。 比 如 车 辆 尾 号 ,只 有 0 一 9 
个 数 。 而 长 的 大 量 列 表 信 息 在 10S 平 台中 应 该 采用 表 视 图 ( 见 图 6-76(c) ) 。 

图 6-77 是 iPhone 的 选择 城市 的 应 用 , 它 使 用 了 10S 中 的 普通 拾取 需 控 件 。 这 个 拾取 
希 可 以 目 定 义 拨 轮 的 个 数 , 以 及 拨 轮 中 的 内 容 。 




















iPod 令 17:37 LEE 
辽宁 省 沈阳 
辽宁 省 ， 沈 阳 市 
辽宁 省 ， 沈 阳 市 
Button Button 
(a) iOS 6 风格 (b) iOS 7 风格 


图 6-77 ioOS 平 台 普 通 拾取 天 





从 图 6-77 可 以 看 出 1OS 6 AI iOS 7 风格 变化 很 大 ,i9S 6 中 的 拾取 更 采用 拟 物 化 设计 ， 
看 上 去 很 像 老式 仪器 上 的 播 选 装置 。 而 1OS 7 采用 了 非常 简洁 的 扁平 化 设计 。 

提示 : 对 于 设计 师 而 言 ,不 编写 一 行 代码 ,只 是 通过 Xcode 设计 工具 为 普通 拾取 器 提供 
显示 需要 的 数据 是 不 可 能 的 。 而 且 普 通 拾取 器 需要 经 过 比较 复杂 的 代码 编程 才能 显示 里 面 
的 数据 ,如 果 通 过 代码 编程 为 普通 拾取 器 提供 显示 数据 ,如 果 设 计 师 需要 在 原型 设计 阶段 展 
示 普 通 拾取 器 ,我 建议 放置 一 张 首 通 拾取 器 的 截图 就 可 以 了 。 

2. 日 期 时 间 拾 取 器 

日 期 时 间 的 录入 是 比较 麻烦 的 ,如 果 采 用 直接 输入 , 则 需要 验证 它们 的 有 效 性 ,因此 , 几 
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乎 所 有 的 平台 都 提供 了 日 期 和 时 间 选 择 的 控件 

f£ iOS 平台 上 的 日 期 时 间 拾取 器 (Date Picker) 是 同一 个 控件 ,拾取 器 有 4 种 模式 : H 
期 .日 期 十 时 间 、 时 间 和 定时 器 (如 图 6-78 所 示 )。 图 6-79 是 iPhone 时 钟 应 用 ,其 中 的 倒 计 
时 器 模块 使 用 了 定时 器 模式 的 拾取 器 控件 。 





August B 2012 


Today 9 06 AM 





时 间 模 式 (左边 是 iOS 6 风格 、 右 边 是 iOS 7 风格 ) 





定时 禹 模式 (左边 是 iOS 6 风格 、 右 边 是 iOS 7 风格 ) 


图 6-78 日 期 时 间 拾 取 器 模式 





iPod © 17:50 (gum 
计时 器 
0 小 时 43 分 钟 
计时 结束 时 ， 启 用 
o 
rti d '"nm 
(a) iOS 6 风格 (b) iOS 7 风格 


图 6-79 iPhone 时 钟 应 用 
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图 6-80 所 示 是 日 期 时 间 拾 取 需 的 属性 检查 器 ,下 面 介 绍 日 期 时 间 拾 取 需 Date Picker 
中 与 设计 师 有 关 的 一 些 属性 : 
m Mode 属性 ,设置 图 6-78 所 示 的 日 期 时 间 拾 取 各 模式 ,其 中 Count Down Timer © 
HTAR IN ~ Time 是 时 间 模 式 、Date 是 日 期 模式 、Date and Time 是 日 期 十 时 间 檬 式 。 
m Locale 属性 ,设置 拾取 需 本 地 化 显示 ,根据 选择 显示 符合 该 地 区 或 国家 习惯 的 日 期 
格式 。 
m Date 属性 ,设置 当前 时 间 。 


D BG we3525$9 





Date Picker 
Mode | Count Down Timer 
Locale | Default 
Interval | 1 minute 
Date 2013- 8-28 FF 5:54:23 
Constraints Minimum Date 
1970- 1- 1 T 7:30:00 
Maximum Date 


2037-12-31 TF 7:00:00 


Timer 01. 
Count Down in Seconds 


图 6-80 H $H EFT] 56 Boss m TE RS A de 


6.6 对话 框 








对 话 框 的 作用 很 多 ,形式 上 也 很 丰富 ,有 的 是 提升 用 户 信 息 , 有 的 是 让 用 户 选 择 操作 。 
在 10S 平 台中 的 对 话 框 有 3 种 视图 形式 : 警告 框 (AlertView) 、 操 作 表 (ActionSheet) 和 分 享 
列表 (Activity) 。 

提示 :这 三 种 形式 的 对 话 框 显示 只 外 
难 的 事情 ,如 果 设 计 师 需要 在 原型 设计 F 


6.6.1 警告 框 





EE 通过 代码 编程 控制 ,因此 对 于 设计 师 而 言 是 比较 
介 段 展示 他 们 ,我 们 建议 放置 一 张 截图 就 可 以 了 。 


警告 框 用 来 给 用 户 提 示 信 息 , 或 者 让 用 户 进行 选择 的 对 话 框 。 和 警告 框 至 少 有 一 个 按钮 ， 
没有 按钮 的 警告 框 会 让 用 户 无 所 适 从 。 在 一 个 按钮 情况 下 它 的 作用 是 提示 用 户 ( 如 图 6-81 
所 示 ) ,使 用 一 个 按钮 的 警告 框 时 一 定 要 慎重 ,警告 框 是 一 种 非 稼 强势 的 对 话 框 ,不 管用 户 在 
做 什么 它 都 会 弹出 并 显示 在 屏幕 中 央 , 这 样 的 用 户 体验 很 不 好 。 如 宁 只 是 为 了 告诉 用 户 “ 有 
新 的 版 本 需要 更 新 ” ,用户 会 怎么 想 呢 ?这 个 应 用 或 许 对 于 你 很 重要 ,而 对 于 用 户 来 说 可 能 
只 是 沧海 一 桶 ,不 值得 一 提 。 我 们 推 存 通 过 采用 推送 通知 将 这 些 消息 提示 给 用 户 , 用 户 可 以 
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设置 是 否 弹 出 这 类 信息 ,这 才 是 以 用 户 为 中 心 的 体验 设计 。 


提示 信息 
有 新 的 版 本 更 新 





OK 





(a) iOS 6 风格 (b) iOS 7 风格 
图 6-81 一 个 按钮 的 10S 警告 框 


如 果 你 需要 让 用 户 确 认 ,可 以 使 用 两 个 按钮 的 移 告 框 。 从 图 6-82 中 你 可 能 会 发 现 这 里 
有 两 个 警告 框 , 而 它们 的 Yes 和 No 按钮 是 相反 的 。 事 实 上 这 两 个 按钮 的 位 置 有 很 大 的 学 
问 , 如 果 进 行 没 有 破坏 性 的 操作 的 时 候 , 确 定性 操作 按钮 在 右边 ,而 取消 操作 按钮 在 左边 ,这 
是 因为 右边 的 按钮 不 容易 被 拇指 按 到 。 如 末 进 行 的 是 破坏 性 操作 ,确定 性 操作 按钮 在 左边 ， 
而 取消 操作 按钮 在 右边 。 


提示 信息 
有 新 的 版 本 更 新 


No Yes 











提示 信息 
有 新 的 版 本 更 新 








Yes No 


(a) iOS 6 风格 (b) iOS 7 风格 


图 6-82 ”两 个 按钮 的 10S 警告 框 


6.6.2 PER 


使 用 警告 不 应 该 超过 两 个 按钮 ,如 采 有 更 多 的 操作 选择 ,可 以 采用 操作 表 。 如 图 6-83 
Æ Fl Brz ,在 iPhone(1OS 6) 中 操作 表 会 从 屏 异 下 方 滑 出 ,注意 ,取消 操作 动作 按钮 应 该 在 最 
下 面 。 操 作 表 中 也 有 关于 破坏 性 操作 的 考虑 ,如 图 6-83 右 图 所 示 ,红色 的 Delete 按钮 是 破 
坏 性 操作 , 它 是 放置 最 上 面 ,系统 给 它 标 识 为 醒目 的 红色 。 如 图 6-84 图 所 示人 是 iPhone 
GOS 7) 中 操作 表 , 破 坏 性 操作 为 红色 文字 。 

在 iPad 中 操作 表 的 显示 并 非 从 屏幕 下 面 滑 出 ,而 是 出 现在 屏 厌 的 中 央 ( 见 图 6-85(a))， 
或 者 我 们 把 它 放 到 浮动 层 (Popover) 中 显示 ( 见 图 6-85(b))。 需 要 注意 的 是 ,在 iPad 中 的 取 
消 操作 动作 按钮 消失 了 ,因为 在 这 里 取消 操作 动作 是 通过 再 次 单 击 触发 它 的 按钮 实现 的 。 
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Mail Note 


Cancel Cancel 





图 6-83 iPhone(iOS 6) 中 的 操作 表 


Mail Note Mail Note 


Instapaper Instapaper 


Cancel Cancel 


图 6-84  iPhone(10OS 7) 中 的 操作 表 
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Pad / iOS 6.0 (10A403) 


iponsor Review 


Delete 


Mail Note | Delete 


Instapaper Upload Review 


(a) 出 现在 屏幕 中 央 (b) 浮动 层 显 示 


图 6-85 iPad(iOS 6) 中 的 操作 表 





6.6.3 分 享 列 表 


在 iOS 6 之 前 ,分 享 操作 是 由 操作 表 实 现 的 。iOS 6 出 现 后 ,人 处理 分 享 操作 可 以 使 用 分 
享 列表 (Activity)。 图 6-86(a) 为 iPhone(iOS 6) 中 的 分 享 列表 , 它 的 出 现形 式 与 操作 表 类 似 
都 是 从 屏幕 下 滑 出 。 图 6-86(b) 为 iPad(iOS 6) 中 的 分 享 列表 , 它 应 该 是 在 浮动 层 中 出 现 , 在 
iPad 中 使 用 分 享 列表 也 没有 取消 按钮 。 


























(a) iPhone 中 的 分 享 表 (b) iPad 中 的 分 享 表 


图 6-86 iOS 6 中 的 分 享 列表 
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分 至 列表 (Activity) 在 10S 7 之 后 有 很 大 的 变化 (如 图 6-87 所 示 ), 分 对 列表 被 分 为 三 
"Bt: AirDrop, 用 来 与 周转 的 侍 果 设备 共 至 照片 等 信息 ; 第 二 栏 是 将 照片 等 信息 共 圣 
到 社交 网 络 ; 第 三 栏 是 其 他 的 一 些 共 吝 方 式 , 其 中 包括 了 复制 、. 约 灯 片 显示 和 AirPlay 等 方 
式 显示 图 片 等 。 











iPod F 18:15 .- — 1 


取消 已 选择 1 张 照片 


e è oo oa - - 
p. 
| t 
— 
| [4 | 
| | n (~ 


ÆA, AirDrop 

@ ) 即时 与 周转 的 联系 人 共享 。 如 果 他 们 没有 自 
H 动 出 现 ， 请 要 求 他 们 打开 "控制 中 心 "并 开 

^ . &"AirDrop". 


QUOB vi 


iCloud Twitter i 











m 幻灯 片 显示 AirPlay ”指定 给 联 系 人 | 


图 6-87 1O0S 7 中 的 分 享 列表 


6.7 活动 指示 器 和 进度 条 


活动 指示 希 和 进度 条 用 来 将 任务 进行 的 情况 反馈 给 用 户 。 活 动 指示 需 是 在 不 能 确定 任 
务 进度 的 情况 下 使 用 的 ,只 要 它 一 下 在 动 就 说 明 任 务 没 有 结束 ,如 果 停 止 则 说 明 任 务 完成 。 
进度 条 是 在 能 够 知道 任务 进度 的 情况 下 使 用 的 ,通过 它 可 以 告诉 用 户 任 务 处 理 的 进展 情况 。 
下 面 分 别 介 绍 它 们 的 使 用 方法 。 

6.7.1 活动 指示 如 

在 iOS 平 人 台中 的 活动 指示 融 可 以 出 现在 状态 栏 中 ,用 来 表示 当前 任务 是 否 是 网 络 通信 
的 任务 (如 图 6-88 中 的 四 所 示 ) ,标准 的 活动 指示 大 如 图 6-88 中 的 四 所 示 。 

活动 指示 器 设计 的 目的 是 为 了 消除 用 户 的 心理 等 竺 时间, 它 的 呈现 要 能 与 环境 融合 在 一 
起 。 图 6-89 是 iPhone 的 “iBooks” 应 用 ,其 中 图 6-89(a) 是 应 用 刚刚 开始 启动 加 和 载 图 书 , 会 有 一 
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* € 
收 件 箱 (62) z "m 
n" nudi [ZZ — 
Apple 13-2-26 来 网 易 云 音乐 DARE PU (6 RRON 
Your recent download with your Appl... 》 网 易 云 音乐 立刻 体验 欢迎 通过 官方 网 站 
Dear long jia, Your Apple ID, music.163.com 官方 微 博信 网 易 云 音乐 
eorient&à 163.com, was just used to downl... 
eqxmihvmf 13-7-23 
Pulse 13-2-26 95616893618 — M,R T3 
Welcome to Pulse, zhao! 附件 ; Iboszkzpvamalh.ipa 


Hello zhao Welcome to Pulse Thanks for 
creating your Pulse account. You can no... 
` iCloud 13-7-19 
网 易 邮 件 中 心 13-1-24 
4 A special invitation to try a new iCloud... 
2013， 让 我 们 一 起 坚持 一 个 梦想 ! 


- ; P NA 》 Get Started Dear long, We'll soon be 
网 易 邮 件 中 心 关于 网 易 - 关于 网 易 免 费 邮 - 


- 人 直人 merde introducing a new and exciting feature.. 
客户 服务 - 隐私 政策 网 易 公司 版 权 所 有 ©... | 





关东 升 E 13-1-21 网 易 邮 件 中 心 13-7-11 
万 科 幸 福 汇 携手 网 易 邮箱 7 月 20 日 前 认 ... 
Coupon 如 果 你 不 想 再 收 到 该 产品 的 推荐 邮件 ， 请 
E tnmen... [f 
(a) iOS 6 风格 (b) iOS 7 风格 


图 6-88 iOS 活动 指示 器 





个 浮动 的 等 待 指示 如。 而 网 6-89(b) 是 从 平 末 App Store 加 载 数 据 , 这 时 候 显示 的 等 符 指 示 骨 
被 放 在 左上 角 的 编辑 按钮 中 。 当 等 待 指示 华 停 止 后 ,按钮 又 变 回 "编辑 ” 厂 ( 见 图 6-89(c) ) 。 











(a) 局 动 加 载 (b) is App Store 加 载 数据 (c) fora 6g ab 


图 6-89 iPhone 的 iBooks 应 用 
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如 果 想 从 对 象 库 中 拖 蝶 活 动 指 示 带 ,参考 图 6-90 所 示 的 Activity Indicator View ,该 控 
件 就 是 活动 指示 器 了 ,将 Activity Indicator View 拖 忠 到 设计 视图 就 可 以 了 。 





{} o E 
"Ww Allows tapping the control to toggle... 


Activity Indicator View - Provides 
feedback on the progress of a task or 


LS 
i process of unknown duration. 


Progress View - Depicts the 
progress of a task over time. 


图 6-90 对象 库 中 的 活动 指示 天 


图 6-91 所 示 是 活动 指示 需 属 性 检查 硕 , 下 面 介绍 活动 指示 融 中 与 设计 师 有 关 的 一 些 属 性 : 

m Style 属性 ,设置 活动 指示 右 的 样式 ,包括 Large White, Gray 和 White 三 种 样式 。 

m Behavior 属性 ,其 中 Animating 是 设置 活动 指示 器 运动 起 来 ,Hides When Stopped 
是 设置 当 活 动 指 示 右 停止 运动 时 隐藏 。 


D Beo 
Activity Indicator View 


Style | Large White 
Color | L= | Default. 
Behavior 区 Animating 


|. | Hides When Stopped 





图 6-91 i558 as FETTE n 


6.7.2 进度 条 


图 6-92 展示 的 是 iOS 的 进度 条 , 它 可 以 显示 任务 的 进度 情况 。 为 了 防止 进度 条 太 突 
元 ,可 以 放 在 工具 栏 等 控件 中 。 


Downloading. 50% — FA... 





Downloading... 50% 
g : 下 载 中 .. | 


图 6-92 10S 的 进度 条 


如 果 想 从 对 象 库 中 拖 点 进度 条 ,参考 图 6-90 所 示 的 Progress View, 该 控件 就 是 进度 条 
了 。 只 需要 将 Progress View 拖 忠 到 设计 视图 就 可 以 了 。 

图 6-93 所 示 是 进度 条 属性 检查 器 ,下 面 介 绍 进度 条 中 与 设计 师 有 关 的 一 些 属性 ; 

a Style 属性 ,设置 进度 条 的 样式 ,包括 Default 和 Bar 两 种 样式 , Bar 样式 是 用 在 各 种 
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位 ”昌国 5 
m Progress 属性 ,设置 初始 进度 Progress View 的 取 值 是 0.0 一 1.0,0.5 是 指 进度 的 一 半 。 


D B E t 9 O 
Progress View 


Style | Default 








Progress 0.5 ($) 
Progress Tint | C] | Default 
Track Tint | C= | Default 








Progress Image | Z 
Track Image | | | IE 


图 6-93 ”进度 条 属性 检查 天 


6.8 列表 和 网 格 


列表 和 网 格 是 能 够 包含 其 他 控件 的 内 容 视 图 ,事实 上 它们 也 是 一 种 布局 的 方式 (在 后 面 关 
于 布局 和 构图 设计 的 章节 里 还 会 提 到 ) ,这 里 主要 作为 控件 元 素 讲解 。 它 们 实际 上 决定 了 应 用 
的 结构 。 每 一 个 平台 都 有 目 己 不 同 的 风格 ,当然 它们 运用 列表 和 和 网 格 的 方式 也 是 不 同 的 。 列 
表 只 是 显示 一 列 的 内 容 视 图 ( 见 图 6-94(a)) ,而 网 格 是 显示 多 列 多 行 的 内 容 视 图 ( 见 图 6-94(b))。 




















(a) 列表 (b) 网 格 
图 6-94 列表 和 网 格 示 意图 
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在 1OS 平台 中 列表 视图 是 表 视 图 (TableView) ,虽然 叫做 “ 表 视 图 ”, 但 它 是 只 有 一 列 的 
表 , 就 是 网 6-94(a) 所 示 的 列表 。iOS 平台 网 格 视 图 是 集合 视图 (CollectionView), 它 是 在 
IOS 6 之 后 推出 的 ,以 前 实现 网 格 效 末 比较 抹 烦 。 


6.8.1 表 视 图 


IOS 中 的 表 视 图 是 最 常用 的 且 形 式 直 富 多 样 的 视图 。 它 的 使 用 涉及 布局 .导航 和 展示 
数据 等 。 表 视图 主要 分 为 普通 表 视 图 ( 见 图 6-95) 和 分 组 表 视 图 ( 见 图 6-96) ,下 面 简要 介绍 
一 下 这 两 种 视图 。 

m 普通 表 视 网 : 主要 用 于 动态 表 , 而 动态 表 一 般 在 单元 格 数 目 未 知 的 情况 下 使 用 。 

m 分 组 表 视 图 : 一 般 用 于 葬 态 表 , 会 将 表 分 成 很 多 “孤岛 ”, 这 个 “孤岛 ”由 一 些 类 似 的 单 

元 格 组 成 。 裔 态 表 一 般 用 于 控件 的 界面 布局 , 它 是 在 10S 5 之 后 在 故事 板 中 提供 的 。 


























iPod F 14:35 me 
€ 播放 列表 ”90 年代 音乐 播放 中 >》 
Get Back 
Alternative > x e. The Beatles 
CA Let It Be 
AlternRock 》 四 4 The Beatles 
- Pay No Mind (Snoozer) 
Electronic > z3 diae | 
Isobel 
Hard Rock > ky Biik | 
Jazz » 二 Girl Singing In The Wreck... 
Black Box Recorder 
Pop / Oldies 》 人 Change 
Blind Melon 
Punk > [^ Picture Of You 
"0 The Cure 
其 他 á A Longview 
Green Day 
zb T9. 小 ecc | - EB -多 
”播放 列表 表演 者 To £u 更 多 "TT 


图 6-95 ”普通 表 视 图 (左边 是 10S 6 风格 ,右边 是 i0S 7 风格 ) 





此 外 ,在 表 视 图 中 还 可 以 带 有 索引 列 、. 选 择 列 和 搜索 栏 等 ,下 面 介 绍 一 下 具有 这 种 特征 
的 表 视 图 情况 。 图 6-97 所 示 的 是 索引 表 视 图 。 一 般 依 况 下 ,在 表 视 图 超过 一 屏 的 情况 下 就 
应 该 添加 索引 列 。 图 6-98 所 示 的 是 选择 表 视 图 ,这 在 前 文 介绍 过 。 图 6-99 所 示 的 是 市 有 
搜索 栏 的 表 视 图 。 

表 视 图 单元 格 还 可 以 进行 搬入、 删除 和 移动 。 图 6-100 所 示 的 是 搬入 和 添加 单元 格 的 
表 视 图 。 图 6-101 所 示 的 是 移动 单元 格 的 表 视 图 。 
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iPod F 15:51 
Safari 《 设置 Safari 
通用 
搜索 引擎 Google 》 
Yahool 》 
密码 与 自动 填充 
自动 填充 关闭 》 
个 人 收藏 个 人 收藏 》 
HEN. CRANE? 打开 链接 在 新 页 面 中 》 
Y 阻止 弹出 式 窗口 ' 
秘密 浏览 e o 隐秘 与 安全 性 
不 跟踪 * 


接受 Cookie 从 访问 过 的 网 页 》 





阻止 Cookie 来 自 第 三 方 和 广告 商 >》 
清除 历史 记录 


清除 Cookie 和 数据 


智能 搜索 栏 
欺骗 性 网 站 警告 €) 





图 6-96 分 组 表 视 图 (左边 是 1OS 6 风格 AE 108 7 风格 ) 


Carrier F 9:43 PM Lc 
ASH A 组 
A1- 南 非 A1- 南 非 
A-REN i A2- 墨 西 哥 
A3- 乌 拉 圭 A3- 乌 拉 圭 
A4- 法 国 A4- 法 国 ^ 
B 组 Big : 
E 
BUS : B1- 阿 根 迁 F 
+ 
B2- 尼 日 利 亚 B2- 尼 日 利 亚 
B3- 韩 国 B3- 韩 国 
B4- 希 用 
C 组 
C1- 英 格 兰 H 





图 6-97 iOS 的 索引 表 视 图 
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C c= 9:57 PM - 
€ First Level. Check One 

Who Hash Who Hash 

Bubba Gump Shrimp Étouf... v Bubba Gump Shrimp Étouffée ~ 

Who Pudding v Who Pudding v 

Scooby Snacks Scooby Snacks 

Everlasting Gobstopper v Everlasting Gobstopper 

Green Eggs and Ham Green Eggs and Ham v 

Soylent Green Soylent Green 

Hard Tack Hard Tack v 

Lembas Bread Lembas Bread 
EUREN CERTUS 

图 6-98 ”1iOS 的 选择 表 视 图 
Carrier F 10:03 PM p= 

I Q Search for Name 

m Sa | mc 

NIZZ dd oae 

— | E an 

ia > gg B2- 尼 日 利 亚 
igeria B Nigeria m 

EE nm I e 二 -aa 

mi | age 

Illy | me 

"Xm | a Ana 

— e | E 
mm E2-71X " "m Fo. 

图 6-99 10S 的 搜索 栏 表 视图 
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一 -一 Came? 单元 楼 措 人 和 删除。 Done 
单元 格 插 入 和 删除 e m MS o 








图 6-100 10S 表 视 图 中 的 单元 格 删 除 和 添加 


时 元 格 移动 





图 6-101 10S 表 视 图 中 的 单元 格 移动 
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下 面 通 过 一 个 实例 介绍 如 何在 Xcode 5 中 设计 表 视 图 ,从 设计 师 角 度 来 讲 , 使 用 表 视 网 
就 是 设计 界面 布局 ,因此 这 里 重点 介绍 表 视 图 实现 的 界面 布局 。 图 6-102 是 苹果 官方 的 即 
时 聊天 工具 iMessage 应 用 的 登录 界面 ,如 果 这 个 界面 没有 采用 表 视 图 来 控制 布局 ,界面 会 























韭 和 常 难看 。 
iPod F 11:26 |-— 
《 设置 iMessage 
输入 Apple ID 


eorientG'sina.com 


创建 新 Apple ID 





图 6-102 iMessage 应 用 登录 界面 


如 果实 现 图 6-102 的 界面 ,可 以 使 用 项 态 表 或 动态 表 实 现 , 静 态 表 不 需要 编写 代码 , 设 
计 师 就 可 以 进行 原型 设计 了 ,而 动态 表 涉 及 编写 代码 ,对 于 设计 师 来 说 使 用 起 来 有 一 定 难 
度 。 因 此 本 书 重点 介绍 静态 表 实 现 该 案例 。 

下 面 把 图 6-102 的 界面 简化 一 下 ,采用 静态 表 技 术 实 现 如 图 6-103 所 示 的 案例 。 

使 用 SingleView Application 模板 创建 一 个 名 为 StaticTableGroup 的 工程 。 打 开 主 故 
事 板 文件 的 设计 界面 ,在 View Controller Scene 中 选中 View Controller 删除 控制 器 ,然后 
从 控件 库 中 拖 电 一 个 Table View Controller 到 设计 界面 ,选择 Table View Controller 
Scene Table View， 打 开 其 属性 检查 器 ,如 图 6-104 所 示 , 从 Content 下 拉 列 表 中 选择 
Static Cell( 即 静态 表 ) ,将 Sections 的 值 设 为 3, 即 3 节 , 从 Style 下 拉 列 表 中 选择 Grouped. 

然后 再 选择 Table View Controller Scene Table View—> Table View Section ,选中 第 
A FA E H S ERA kr UI] 6-105 所 示 , 将 Rows BJ (E 1x 2g 2. BY "P Blas PI P ER 
元 格 。 还 可 以 根据 需要 设 定 Header TA) fll Footer CS JD , 
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eorientGsina.com 


LE 
XU 


创建 新 Apple ID 


图 6-103 登录 界面 


D Bs ws559 














Index Row Limit | ol 


Text Color | C | Default : 





图 6-104 PORRER A dn 


Ww | < > D StaticTableGroup > [3I Stati... 
v EJ Table View Controller Scene 


v (D Table View Controller 
v — Table View rl i. 


> — Table View Cell S 
> = Table View Cell 
» KB Table View Section 
» IB Table View Section 
@ First Responder 
国 Exit 





图 6-105 MARP AIT Jm TET? A Ar 
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将 两 个 TextField 控件 分 别 拖 忠 到 这 个 市 中 的 单元 格 上 ,调整 布局 设 定 属性 。 在 静态 
表 第 二 节 中 ,有 一 个 按钮 ,按照 上 面 的 方法 设 定 。 第 三 市 的 单元 格 中 有 标签 控件 (Label) 和 
扩展 指示 器 ,其 中 扩展 指示 器 的 设 定 如 图 6-106 所 示 。 选 择 View Controller Scene Table 


View Table View Section, 打 开 其 属性 检查 器 ,从 Accessory 下 拉 列 表 中 选择 Disclosure 
Indicator (JJ JÉJS& ZR 48) 。 


“i | <4 » D sutcTableCroup > (Di S... ) 
v E Table View Controller Scene 
v (3 Table View Controller 
v — Table View 
» @ Table View Section 
» [LI Table View Section 
v > Table View Section 


a 
i T 
- ^ 









v Content View D B "mm we» o 
Label - 创建 和 所感 户 Table View Cell 
D First Responder Style | Custom 
IB Exit 





Identifier Reuse identifier 








Selection | Blue 
Accessory | Disciosure indicator 342 i 
(———— ^ 
Editing Acc. | None $ be 
vr ^ 
indentation 13) | ol: S 
Level Width 


M indent While Editing 
| | Shows Re-order Controls 
Separator insets | Defauit 






Detail Disclosure 
Checkmark 
Detail 








View 





图 6-106 ”单元 格 选择 扩展 图 标 
这 样 整个 界面 就 设计 好 了 ,如 图 6-107 所 示 ,读者 可 以 与 图 6-90 的 效果 对 比 一 下 。 


登录 


创建 新 账户 





图 6-107 设计 完成 的 界面 
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6.8.2 集合 视图 

在 iOS 中 使 用 网 格 的 场景 不 是 很 多 ,相对 而 言 在 iPad 上 使 用 的 要 比 iPhone 多 一 些 。 
图 6-108 Ca) 是 iPhone 的 “iBooks” 应 用 ,这 里 摆 满 图 书 的 书架 采用 的 就 是 网 格 视 图 。 
图 6-108(b) 是 iPad 上 的 时 钟 应 用 ,也 采用 了 网 格 视图 。 











"mun 


(b) 时 钟 应 用 





(a) iBooks 应 用 


iPhone fj *iBooks" Jy FH fll iPad 的 “时 钟 ? 应 


复杂 的 控件 ,很 多 属性 的 设置 需要 程序 代码 来 完成 ,因此 对 于 设 
张 截 图 就 可 


图 6-108 


提示 :集合 视图 是 非常 
计 师 而 言 是 比较 困难 的 事情 ,如 果 设 计 师 需要 在 原型 设计 阶段 展示 ,建议 放置 一 


ATs 





应 用 程序 导航 


不 知道 大 家 对 《格林 鞋 话 ) 中 “糖果 屋 ” 的 故事 ( 见 图 7-1) 是 否 还 有 印象 : 汉 洋 尔 与 格 莱 
性 是 一 个 贫穷 伐木 工人 的 小 孩 。 由 于 害 民 食物 不 足 , 伐 木工 的 妻子 ,也 就 是 两 个 孩子 的 继 
母 ,说 服 木 工 把 孩子 们 市 到 森林 里 ,并 将 他 们 遗 茎 。 汉 渗 尔 与 格 羔 特 听 到 了 他 们 的 计划 ,于 
是 事先 收集 了 小 石 尖 ,沿途 播撒 ,这 样 他 们 就 能 沿 小 石 尖 找到 回 家 的 路 。 在 他 们 回来 后 ,他 
们 的 继母 再 度 说 服 木 工 将 他 们 丢 在 森林 ; 不 过 这 次 ,他们 沿路 布置 的 是 面包 悄 。 不 下 的 是 ， 
面包 习 被 条 林 中 的 动物 吃 反 了 ,于 是 汉 洋 尔 与 格 莱特 在 条 林 中 迷路 了 。 











图 7-1 《格林 童话 ) 中 的 糖果 屋 
“小 石头 ”和 ”面包 居 ?能够 帮助 孩子 们 找到 “" 回 家 ”的 路 。 作 为 应 用 软件 设计 师 ,我们 同 





样 需 要 考虑 到 用 户 在 使 用 你 应 用 的 时 候 , 是 否 能 够 找到 “ 回 家 ”的 路 。 特 别 是 当 你 的 应 用 是 
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由 很 多 页 面 构成 的 时 候 , 用 户 为 了 完成 菜 项 功能 或 任务 ,需要 在 这 些 界面 中 游 飞 ,如 朱 没 有 
清晰 的 导航 设计 ,他 们 会 很 容易 “迷路 ”, 无 法 返回 到 上 自己 出 发 的 页 面 里 。 可 见 , 合 理 而 科学 
的 导航 设计 在 用 户 体验 设 计 中 的 重要 性 , 它 也 是 交互 设计 的 重要 环节 。 

在 Web 网 页 设计 中 ,为 了 防止 用 户 在 浏览 网 页 时 迷失 在 众多 网 页 中 ,会 采用 一 种 叫做 
“面包 悄 导 航 ” 的 设计 方式 ,这 个 命名 就 来 源 于 《格林 童话 ) 中 “糖果 屋 ” 的 故事 。 目 前 ,面包 悄 
导航 在 移动 应 用 设计 中 也 是 非常 重要 的 导航 模式 。 本 章 将 加 大 家 介绍 iOS 平 台 应 用 独特 
的 导航 模式 。 


7.1 iOS 应 用 的 导航 模式 


首先 给 大 家 介绍 iOS 平台 设备 的 导航 模式 。 苹 果 公 司 的 导航 设计 ,无 论 是 计算 机 上 的 
Mac OS X 操作 系统 ,还 是 移动 设备 的 10S 操作 平台 都 非常 的 优秀 。 对 于 设计 师 , 侍 琳 公司 
给 出 了 一 整套 的 设计 规范 ,要 求 开发 人 员 在 设计 应 用 时 遵守 这 些 规范 。 这 个 规范 就 是 在 第 
1 章 结 尾 提 到 的 kiOS 人 机 界面 设计 手册 》( 即 (iOS Human Interface Guidelines?) , 它 是 我 们 
设计 iOS 应 用 的 指导 纲领 。 

IOS 应 用 可 选择 的 导航 模式 有 三 种 ,它们 分 别 是 : 

m 平 铺 导航 模式 ,这 种 导航 在 应 用 内 容 的 组 织 上 没有 层次 关系 ,需要 展示 的 内 容 都 放 
置 在 同一 个 大 屏 才 上 ,采用 分 屏 或 分 页 进行 导航 ,可 以 左右 或 者 上 下 清 动 屏 攻 ,查看 
内 容 。 
标签 导航 模式 ,这 种 导航 是 把 应 用 的 内 容 分 别 放置 在 几 个 功能 模块 里 ,每 个 功能 模 
块 之 间 没 有 关联 。 通 过 单 击 标签 实现 在 各 个 功能 模块 中 的 切换 ,达到 管理 功能 模块 
的 作用 。 

树 形 结构 导航 模式 ,也 就 是 前 文 提 到 的 面包 应 导 航模 式 。 应 用 的 内 容 是 有 层次 的 ， 
从 上 到 下 是 分 类 包含 的 关系 ,例如 : 黑龙 江 省 与 哈尔滨 市 的 关系 ,黑龙 江 省 包含 了 哈 
A ip a A de XCBLTE T GÉ HEC PB IX. 















































71.2 平 铺 导航 


平 铺 导 航 一 般 应 用 于 遍 平 化 信息 和 任务 的 导航 。 所 请 局 平 化 信息 就 是 这 些 信息 之 间 没 
有 从 属 的 层级 关系 。 在 IOS 的 应 用 中 平 铺 导航 模式 主要 有 两 种 实现 方式 : Ap BE T fI 
(UIPageControl) 和 分 页 控件 (UIPageViewController)，。 


7.2.1 分 研 控 件 的 导 般 实现 


分 屏 控 件 (UIPageControl) 是 iOS 标准 控件 , 它 的 主要 作用 就 是 将 一 个 大 的 屏幕 分 成 几 
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个 小 的 标准 屏幕 来 显示 ,一般 会 在 屏幕 的 下 面 出 现 一 排 小 圆 点 ,如 果 分 成 5 个 屏幕 就 会 显示 
5 个 小 辐 点 ,高 完 的 小 点 是 当前 屏 共 ,如 图 7-2 所 示 。 
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时 期 
T Apy 
yu 
s H7 


ZEE 





(a) OS 6 风格 (b) iOS 7 风格 
图 7-2 ”基于 分 屏 探 件 的 导航 


操作 分 屏 控件 的 手势 有 两 种 ,一 种 是 单 击 小 圆 点 的 左 侧 (上 边 ) 或 右 侧 (下 边 ) 实 现 翻 屏 ， 
另 一 种 是 用 手 在 屏幕 上 滑动 实现 翻 屏 。 小 圆 点 应 该 限制 在 20 个 以 内 ,超过 20 个 就 会 = 
事实 上 一 个 应 用 如 果 超 过 10 A ER E HI F A 94. TÉ] EREA A ERNE Y o M 
ao —^r ER EIR Æ vr HS EE ! 

屏 控件 导航 在 iPhone 和 iPad 的 很 多 应 用 中 都 被 采用 ,种 用 于 实用 型 应 用 程序 构建 。 
xti 序 完成 的 任务 相对 简单 ,对 用 户 输入 要 求 很 低 。 用 户 使 用 实用 型 应 用 程序 , 通 
常 是 为 了 快速 查看 信息 摘要 或 是 在 少数 对 象 上 执行 简单 任务 。iPhone 目 带 的 股票 应 用 的 
就 是 一 个 典型 的 实用 型 应 用 程序 。 界 面 信息 分 为 “正面 "和 “背面 ”两 个 界面 ,正面 采用 分 屏 
控件 导航 (如 图 7-3 所 示 )。 在 正面 单 击 右 下 角 的 园 (CiOS o a E GOS 7) 图 标 按钮 ,界面 翻 
转 到 背面 ,背面 一 般 是 用 来 对 应 用 进行 设置 的 (如 图 7-4 所 示 )。 

is. 设计 师 在 使 用 分 屏 控 件 的 导航 进行 原型 设计 的 时 候 是 比较 麻烦 的 ,因为 分 屏 控 
件 的 导航 需要 代码 编程 ,这 种 情况 下 建议 把 界面 做 成 与 设备 等 比例 的 图 片 , 然 后 将 图 片 导入 
到 设备 的 图 片 库 中 ,通过 图 片 库 来 浏览 导航 效果 。 
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DOW J 14,824.51 


ne] 21,524.65 


FTSE 100 36,430.06 


^N225 | 13.400.70 


NASDAQ 3,593.35 


HANG SENG INDEX S&P 500 1,634.96 


开盘 价 : 21,584.56 市 值 


最 高 价 : 21,655.24 52 周 最 高 价 : 23,944.70 


6 个 月 


Sr: 21,465.72 52 周 最 低 价 : 19,076.80 


o0000 0 0 


平均 成 交 量 
股息 


Etek 





(a) IOS 6/4 f (b) iOS 7/4 F& 


图 7-3 股票 应 用 的 正面 


YHOO (NASDAQ) 


Yahoo! Inc. 


^GDAXI (XETRA) 


DAX 


^DJI 


Dow Jones Industrial Average 


^HSI (Hong Kong) 


HANG SENG INDEX 


^FTSE (London) 
FTSE 100 


^N225 (OSA) 


NIKKEI 225 


AIXIC 


NASDAQ Composite 


YAHOO! FINANCE 





(a) iOS 6 风格 (b) iOS 7 风格 


图 7-4 股票 应 用 的 背面 
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7.2.2 分 页 控件 的 导航 实现 


Æ 10S 5 之 后 ,系统 增加 了 UlPageViewController 控制 六 , 它 主要 用 于 电子 书 和 电子 
杂志 的 导 币 ,也 是 实现 平 铺 导 航 的 一 种 方式 。 分 页 控件 导航 除了 应 用 于 电子 书 和 电子 杂志 
应 外 ,也 可 以 用 于 普通 移动 应 用 的 导航 ,特点 是 以 翻 书 的 动画 效果 呈现 页 面 跳 转 。 图 7-5 是 
iPhone 上 的 iBooks 应 用 里 的 电子 书 的 界面 。 


p eama 令 下午 6:12 。”@ 了 LT 
书库 A QR 














If you have a lot of apps. you might want to 
use Spatlight to locate and open them. See 
Searching. 





Scrolling 


Drag up or down to scroll. On some screens 
To return to the Home screen, press the 


such as webpages, you can also scroll side to 
Home button C) again. 


side, Dragging your finger to scroll doesn't 


View recently used apps: Double-click the choose or activate anything on the screen. 


Home button C) to reveal rhe multitasking 
bar 


Tap an app to use it again. Swipe left to sec 
more apps 


图 7-5 | iOS 平台 的 iBooks 中 阅读 《iPad User Guide》 电 子 书 的 界面 


电子 书 的 导航 采用 了 分 页 控件 的 方式 ,用 户 可 以 像 翻 书 一 样 在 页 面 之 间 跳 转 。 分 页 欣 
件 的 导航 也 需要 一 些 辅助 功能 按钮 ,这 些 辅助 按钮 一 般 被 放置 于 界面 的 顶部 。 当 然 , 如 果 需 
要 可 以 隐藏 这 些 按钮 。 

分 页 控件 还 可 以 设置 双 页 显示 ,图 7-6 所 示 的 是 iPad 上 的 iBooks 应 用 在 横 屏 情况 下 阅 
读 电子 书 。 

在 iPad 的 横 屏 情况 下 ,分 页 控件 采用 左右 双 页 显示 ,可 以 提升 用 户 体验 ,就 像 在 看 真 的 
P= eem 过 程 中 用 户 还 可 以 看 到 下 一 页 的 内 容 , 这 些 功能 和 特效 都 是 由 分 页 
控件 提供 日 

， 的 弊端 ,主要 是 页 面 之 间 的 直接 切换 不 方便 。 为 此 ,有 的 应 用 会 添加 一 
些 辅助 工具 栏 ,在 iBooks 应 用 中 ,页 面 的 下 部 添加 了 可 以 拖 动 的 滑 块 ,通过 拖 忠 滑 块 可 以 快 
速 在 页 面 之 间 切 换 ( 见 图 7-7) 。 

提示 : 设计 师 在 使 用 分 页 控件 的 导航 方式 进行 原型 设计 的 时 候 , 面 临 的 问题 与 分 屏 控 
件 的 导航 是 一 样 的 ,可 以 采用 与 分 屏 控 件 的 导航 类 似 的 处 理 方式 , 即 通过 图 片 库 来 浏览 寻 航 
AR 。 
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图 7-6 iPad 上 的 iBooks 应 用 在 阅读 《iPad User Guide》 电 子 书 的 界面 





See the status of a print job: Double-click 
the Home button C), then tap Print Center 
in the multitasking bar. The badge on the 
icon shows how many documents are ready 





图 7-7 页 面 之 间 直 接 切 换 


在 Xcode 5 工具 中 提供 了 一 种 工程 模板 ,可 以 帮助 我 们 构建 分 页 控件 的 导航 应 用 ,但 是 
灵活 性 比较 差 ,能 够 留 给 设计 师 发 挥 的 东西 不 多 。 无 论 怎 样 我 们 还 是 有 必要 介绍 一 下 这 个 
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工程 模板 的 。 
启动 Xcode, 单 击 File New Project 菜单 ,在 打开 的 Choose a template for your new 
project 界面 中 ,选择 Page-Based Application 工程 模板 (如 图 7-8 所 示 )。 


Choose a template for your new project 


Tabbed Application Utility Application Empty Application 


PO SN DONT THEO. DA OG REI TE UNA a PIRE vie 
controller. 





图 7-8 选择 工程 模板 
然后 单 击 Next 按钮 ,随即 出 现 图 7-9 所 示 的 界面 。 这 里 要 按照 提示 并 结合 目 己 的 实际 
情况 和 需要 输入 相关 内 容 。 


Choose options for your new projecc 


Organization Name  tonyguan 


! (Company Identifier [com.51worké 


Bundle identifier com. S 1work6. PageViewSample 





eese [$2 — — — — ———— 


Devices [Umwemi =) 





图 7-9 新 工程 中 的 选项 
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工程 创建 成 功 之 后 生成 了 两 个 故事 板 文件 : Main. iPhone. storyboard 和 Main. iPad. 
storyboard。 打 开 Main iPhone. storyboard 界面 如 图 7-10 所 示 , 在 场景 列表 中 可 见 有 两 个 
场景 (Root View Controller Scene 和 Data View Controller Scene) ,每 个 场景 下 面 都 有 自己 


的 视图 控制 融和 视图 。Data View Controller 中 的 视图 可 以 负责 显示 书 中 的 每 


Ē Main IPhone.proryboard o E Main Phone. scoryboard (ase) ， 国 Dan View Controller Scene ) O Dara View Corrroller 


E 4 * [D PageawSampia |. PageViewSample 


Bus 


» [ll] Constraints 
B rm hagarda 


"Tem 





Root View Controller 


图 7-10 工程 中 iPhone 版 设计 界面 


iPad 版 本 与 iPhone 类 似 , 但 运行 的 时 候 iPad 版 本 横 屏 情况 下 双 页 面 显示 ( 见 图 7-110200 


而 竖 屏 情况 下 单 页 面 显示 ( 见 图 7-11(b))。 

















图 7-11 iPad 版 运行 界面 
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7.3 标签 导航 








由 于 平 铺 导航 在 页 面 之 间 和 直接 切换 不 是 很 方便 ,内 容 层 次 结构 也 比较 简单 ,那么 可 以 答 
试 使 用 标签 导航 。 在 标签 导航 里 每 个 标签 表 代 表 一 个 功能 模块 ,各 功能 模块 之 间 相 对 独立 。 


7.3.1 iOS 标签 导航 





再 来 看 看 iPhone 中 目 带 的 时 钟 应 用 ,如 图 7-12 和 图 7-13 所 示 。 








图 7-12 iPhone(iOS 6) 上 的 时 钟 应 用 


库 比 提 诺 


WEX. Qt 15 小 时 


O0:00.00 | ee Sm 


HARA. Bm "E s | 


纽约 


WEx. m 12 小 时 





成 都 


今天 

















图 7-13  iPhone(i1OS 7) 上 的 时 钟 应 用 


在 应 用 界面 上 有 4 个 标签 : 世界 时 钟 、 曾 钟 、 秒 表 和 计时 各 ,标签 对 应 的 功能 都 与 时 钟 
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有 关 , 但 是 它们 彼此 之 间 是 互相 独立 ,各 不 相干 的 。 

在 iPhone 中 为 了 单 击 方便 ,标签 栏 中 的 标签 不 能 超过 5 个 ,如 果 超 过 5 个 则 把 最 后 一 
个 设置 成 “更 多 ”, 这 样 可 以 单 击 “更 多 ”标签 出 现 更 多 的 列表 。 由 于 屏幕 尺寸 要 比 iPhone 
大 ,所 以 iPad 下 标签 柱 中 可 以 超过 5 个 。 图 7-14 Æ iPad ER App Store 应 用 ,可 以 看 到 
iPad 下 使 用 标签 导航 的 模式 。 








hew & Nowem 


o$o A zu 
sscosgsgü 





fmm Pes 


Firm nrut Mn 
f o "Ow 
IPIE 
PI d Lj 
Pu ^ é 
= 一 
Pees memi 一 — — ; X 7 Perte im Tem m Meten Freese ct utum! re 
me gen tem 





i ew Ur the App Store fw n) rho App shee’ 
fer geo: E» n 
App com om e 








© 


(a) iOS 6 风格 (b) iOS 7 风格 


图 7-14 iPad 上 的 App Store 应 用 


7.3.2 实例 : 标 竺 导航 模式 城市 信息 


下 面 通 过 一 个 实例 介绍 通过 Xcode 5 工具 实现 原型 设计 。 如 果 已 有 中 国 东北 三 省 的 城 
市 信息 数据 ,包括 哈 尔 演 .齐齐哈尔 等 各 个 城市 名 称 。 如 采 把 它们 分 成 三 组 ,应 该 怎么 分 呢 ? 
Hr 7575 IE H Js c BELT T BC DX, RI 
m BH. ARE JEFES AR X5 Ug ES ps] 、 双鸭山 、 大 庆 、 伊 春 、 佳 木 斯 .七 人 台 河 ` 牡 丹 江 、 
黑河 、 级 化 ,这 12 个 城市 为 黑龙 江 省 管辖 。 
m 第 二 组 ,长 春 、 吉 林 、 四 平 \. 辽 源 、 通 化 \ 白 山 、 松 原 、 日 城 ,这 8 个 城市 为 吉林 省 管辖 。 
m 第 三 组 ,沈阳 、 大 连 、 鞍 山 、 抚 顺 、 本 溪 、 有 丹东、 锦州 、 蝶 口 、 晶 新 .辽阳 、 盘 锅 、 铁 岭 、 袁 
IH xx 14 个 城市 为 辽宁 省 管辖 。 
小 组 内 部 的 数据 有 一 定 的 关联 关系 ,它们 同属 于 一 个 行政 管辖 区 域 ,而 小 组 之 间 没 有 关 
系 且 互相 独立 ,这 就 是 标签 导航 桂 式 适用 的 情况 。 
按照 这 样 的 分 组 方式 在 iPhone 上 摆 放 这 些 城市 ,仍然 会 分 成 3 个 屏幕 ,如 图 7-15 所 
示 ,标签 名 就 是 省 的 名 字 , 当 选中 某 个 省 的 标签 时 ,屏幕 会 显示 出 该 省 的 城市 信息 ,而且 标签 
是 高 亮 显示 的 。 标 签 导 航模 式 的 每 个 标签 各 代表 一 个 功能 模块 ,各 功能 模块 之 间 相 对 独立 。 
具体 的 设计 步骤 如 下 : 首先 启动 Xcode, iE; File New Project 菜单 ,在 打开 的 Choose a 
template for your new project 界面 中 ,选择 Tabbed Application 工程 模板 (如 图 7-16 所 示 )。 
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图 7-15 标签 导航 模式 实例 


[rtr] 


starting paint for an application that uses a tab bar. RED Ebr 


This template provides a 
IN and view controllers for the tab 





图 7-16 选择 工程 模板 
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单 击 Next 按钮 ,随即 出 现 图 7-17 所 示 的 界面 。 这 里 需要 按照 提示 并 结合 目 己 的 实际 
情况 和 需要 输入 相关 内 容 。 


Choose options for your new project 


Bundle Identifier com S 1work& TabNavSample 


an [52 — — — — — — — — — —] 


Devices | iPhone 2) 





图 7-17 新 工程 中 的 选项 
创建 完成 之 后 打开 Main. storyboard, 如 图 7-18 所 示 。 


4 » TabNavsample ) |. TabNavSample > [E| Main.storyboard > E Main.storyboard (Base) ) No Selection 
Tab Bar Controller Scene 
> Ø Tab Bar Controller 
@ First Responder 
E i 
QD Relationship "view controllers" t... 
© Relationship "view controllers" t. 
v 图 First View Controller — First Scene 
v Ø First View Controller - First 
E Top Layout Cuide 
C] Bottom Layout Cuide 
b| View 
* Tab Bar item - first 















图 7-18 创建 完成 的 设计 界面 
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图 7-18 所 示 的 3 个 控制 带 场 景 会 由 一 些 线 连 接 起 来 ,这 些 线 就 是 Segue( 继 续 ) ,看 到 它 
是 否 想 起 了 动画 中 的 “故事 板 ”, 事 实 上 ,iOS 故事 板 起 源 于 动画 行业 。 故 事 板 开始 的 一 端 是 
Tab Bar Controller Scene, 它 是 根 视 图 控制 器 。 图 中 有 两 个 Segue. 它们 摘 述 了 Tab Bar 
Controller Scene 与 First View Controller Scene 和 Second View Controller Scene 之 间 的 关系 。 

我 们 需要 修改 两 个 现 有 的 Scene( 场 景 ), 然 后 再 添加 一 个 Scene( 场 景 ), 才 能 满足 业务 
需求 。 修 改 两 个 现 有 的 Scene 很 简单 ,按照 前 文 修改 视图 控制 帮 命 名 就 可 以 了 ,然后 Scene 
就 会 跟着 变化 。 添 加 一 个 Scene 到 设计 界面 中 ,如 图 7-19 所 示 , 从 对 和 象 库 中 拖 忠 一 个 View 
Controller 到 设计 界面 中 。 





mple > =| Main.storyboard > = Main.storyboard (Base) > No Selection DE Ea 9 o 


First View 


First View Controller - First 


Second View 


Duo m 


View Controller - A controller 
that supports the fundamental 
view-management model in. 


Ox View Controller - A 
EEZ that manages a table 
view 


Second View Controller - Second Collection View Controller - A 


controller that manages 2 
collection view, 





(a) p BE B4" 上 II s & | 











图 7-19 添加 一 个 Scene 到 设计 界面 


此 外 ,还 需要 为 添加 的 Scene 和 Tab Bar Controller Scene 连 线 , 按 住 Control 键 从 Tab 
Bar Controller Scene 4i H2, B bs dl] View Controller Scene, 然 后 松 开 鼠标 ,从 弹出 荣 单 中 选择 
Relationship Segue—view controllers 项 ,这样 连 线 就 做 好 了 ,如 图 7-20 所 示 。 

Segue 有 几 种 不 同 的 类 型 ,在 iPhone 和 iPad 的 开发 中 ,Segue 的 类 型 是 不 同 的 。 在 
iPhone 中 Segue 有 push, modal 和 custom 三 种 ,如 果 是 标签 控制 器 情况 下 还 可 以 有 
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ms p >5egue 


ntrollers 





图 7-20 Scene 连 线 


Relationship Segue—view controllers 类 型 mÆ iPad 中 ,有 push、modal popover replace 
和 custom 五 种 不 同 的 类 型 。 其 中 push 是 用 于 导航 控制 偷情 况 ,modal 是 用 于 模 态 视图 情 
况 ,popover 是 用 于 浮动 层 视 图 情况 ,replace 是 用 于 替换 当前 场景 ,custom 是 目 定 义 导 航 类 型 。 

首先 设计 师 需 要 设计 好 标签 栏 中 标签 需要 的 图 标 , 并 且 为 普通 显示 屏 和 视网膜 显示 屏 
设计 好 不 同 图 标 ,例如 黑龙 江 标 签 ,它们 的 命名 分 别 是 hei. png 和 hei(22x. png, 然 后 添加 图 
标 到 工程 中 。 修 改 标 签 栏 中 标签 的 图 标 和 文本 ,具体 操作 方法 为 : 选择 First View 
Controller —Tab Bar Item, 打 开 其 属性 检查 需 , 如 图 7-21 所 示 , 将 Bar Item 下 的 Title 设 为 
“黑龙 江 ”, 从 Image 下 拉 列 表 中 选择 hei. png。 按 照 同样 方法 选择 First View Controller 一 
Tab Bar Item, 将 Bar Item 下 的 Title 设 为 “吉林 ”, 从 Image 下 拉 列 表 中 选择 Ji. png。 然 后 
再 选择 View Controller — Tab Bar Item, 将 Bar Item 下 的 Title 设 为 “辽宁 ”, 从 Image 下拉 
列表 中 选择 Liao. png。 


> E View Controller - Item Scene 














> [S Tab Bar Controller Scene 


v E First View Controller - First Scene 
v o First View Controller - First 
— Top Layout Guide msnm wm 
— Bottom Layout Guide z£ ~、 


[2 View r 

—- . 
四 Tab Bar item ~ 黑龙江 DA oO 
Tab Bar item 


D First Responder 
B Exit Badge 
identifier | Custom 


Title | Default Position 


v [Bj Second View Controller - Second.. 
v pw] Second View Controller - Second 


^1. Top Layout Guide Bar Item 

- Bottom Layout Guide Title | 是 成 江 
> View 

* Tab Bar Item - Second Image | hei.png " 
@ First Responder Tag ol; 
B Exit (Vf Enabled 


图 7-21 修改 标签 栏 项 目 中 的 图 标 和 文本 
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然后 再 单独 设计 三 个 不 同 的 视图 ,具体 的 视图 设计 过 程 就 不 再 介绍 了 。 参 照 图 7-15 设 
计 各 个 视图 ,设计 完成 之 后 ,如 图 7-22 Bran. 








Second View Controller - Second 


Tab Bar Controller 


- 三 H 








View Controller - 江宁 


图 7-22 ”设计 完成 的 设计 界面 


71.4 树 形 结构 导航 


上 面 介绍 的 标签 导航 只 能 描述 两 个 层级 的 信息 ,如 果 用 来 描述 行政 地 区 的 话 , 只 能 描述 
省 和 市 。 但 是 如 果 需 要 描述 更 加 深层 的 信息 ,如 省 .市 .县 ,标签 导航 就 有 些 困 难 了 。 这 种 情 
况 下 可 以 采用 树 形 结构 导航 模式 。 理 论 上 树 形 结构 导航 层次 可 以 无 限 深 ,但 是 建议 不 要 超 
过 4 层 , 如 果 超 过 4 层 就 得 采用 其 他 办 法 解决 了 。 

7.4.1 iOS 树 形 结构 导航 

树 形 结 构 导 航模 式 将 导航 视图 控制 器 (UINavigationController) 与 表 视图 结合 在 一 起 ， 
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主要 用 于 构建 有 从 属 关系 的 导航 。 采 用 分 层 组 织 信 息 的 方式 ,这 种 方式 可 以 帮助 我 们 构建 
效率 型 的 应 用 程序 。 效 率 型 应 用 程序 具有 组 织 和 操作 有 具体 信息 的 功能 ,通常 用 于 完成 比较 
重要 的 任务 和 使 用 分 层 组 织 信 息 ,iOS 的 “相册 ”应 用 是 效率 型 应 用 程序 的 典型 例子 。 

图 7-23 展现 的 是 iPhone 上 的 邮件 应 用 , 它 采 用 的 就 是 树 形 结构 导航 ,所 有 界面 的 项 部 
都 有 一 个 导航 栏 ,第 一 个 界面 是 树 形 结构 的 “ 树 根 ”, 我 们 称 之 为 “ 根 视 图 ”; 第 二 个 界面 是 二 
级 视图 ,也 就 是 “树干 ” 第 三 个 界面 是 三 级 视图 ,也 就 是 “树叶 ”。“ 树 根 ” 和 “树干 ”采用 表 视 
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(b) iOS 7 风格 


图 7-23 iPhone 上 的 邮件 应 用 
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图 ,因为 表 视 图 在 分 层 组 织 信息 方面 的 优势 很 突出 。“ 树 干 7 理论 上 来 讲 可 以 有 很 多 级 ,但 是 
最 好 不 要 太 多 ， 树 时" 一 般 是 一 个 平 铺 的 视图 , 它 能 够 达到 具体 展示 的 作用 。 

可 以 为 “ 根 视图 ”的 导航 栏 添加 左右 按钮 ,但 是 二 级 和 三 级 视图 的 左 按 钮 是 由 导航 控制 
器 自己 添加 的 ,目的 是 能 够 返回 上 一 级 , 它 就 是 我 们 布置 在 路 上 的 “面包 悄 ” ,我 们 无 法 自 
已 定 义 这 个 按钮 ,否则 用 户 避 ® 会 在 你 的 应 用 中 迷路 。 这 也 造成 了 树 形 结构 导航 的 缺点 «IIS C 
是 你 怎样 进来 ,你 就 得 怎样 按 原 路 返回 。 这 就 不 如 标签 导航 方便 ,因为 标签 导航 可 以 很 快 地 
在 各 个 模块 之 间 切 换 。 

树 形 结构 导航 在 iPhone $I iPad 设备 下 展示 的 方式 区 别 很 大 ,图 7-24 所 示 的 是 iPad A 
寓 邮 件 应 用 的 横 屏 显示 模式 。 由 于 iPad 屏 放 比较 大 , 横 屏 模式 下 会 分 杜 显示 ,使 用 的 控件 
是 “分 栏 视图 ”。“ 分 栏 视 图 ”是 iPad 特有 的 视图 , 专 为 树 形 结构 导航 而 设计 的 ,这 种 视图 不 
需要 界面 的 切换 就 可 以 展示 更 多 的 信息 。 
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图 7-24 iPad 上 邮件 应 用 的 横 屏 显示 模式 


在 iPad 横 屏 模式 下 ,“ 分 柱 视 图 ”把 屏 大 分割 为 左右 两 个 视图 , 右 侧 是 DetailView, 人 负责 
显示 详细 信息 ; 左 侧 是 MasterView, 里 面 有 一 个 导航 列表 ,通过 它 为 右 侧 的 DetailView 导 
Wi. MasterView 的 导航 列表 占有 320 点 的 固定 宽度 。 在 竖 屏 的 模式 下 MasterView 会 隐 
藏 起 来 ,图 7-25 左 图 展示 了 邮件 应 用 的 竖 屏 显示 模式 , 想 要 显示 它 需 要 单 击 左 上 和 角 的 “ 收 件 
箱 ” 按 钮 ( 见 图 7-25 右 图 )。 可 以 发 现 展开 的 MasterView 视图 是 漂浮 在 DetailView 视图 上 
的 ,这 种 形式 的 视图 叫做 “浮动 层 ”(Popover) ,浮动 层 经 常 出 现 于 iPad 中 作为 内 容 视 图 
使 用 。 

















OD 引 自 于 格林 兄弟 所 收录 的 德国 童话 一 一 糖果 屋 》, 又 译 4 汉 泽 尔 与 格 莱特 兴 德 语 《Hansel und Gretel》) 。 
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图 7-25 iPad 上 的 邮件 应 用 竖 屏 显示 模式 (上 边 是 10S 6 风格 、 下 边 是 i9S 7 风格 ) 
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7.4.2 实例 : 树 形 导航 模式 城市 信息 


下 面 通过 一 个 实例 介绍 利用 Xcode 5 工具 实现 原型 设计 。 同 样 是 按照 行政 区 划 来 展示 
东北 三 省 的 城市 信息 。 


第 一 组 ,哈尔滨 齐齐哈尔、 鸡西 ` 匆 凡 、 双鸭山 ` 大庆、 伊 春 、 佳 木 斯 .七 台 河 牡丹江 、 
黑河 、 级 化 ,这 12 个 城市 为 黑龙 江 省 管辖 。 

第 二 组 ,长春 . 吝 林 、 四 平 . 辽 源 B fe. AL AR .日 城 ,这 8 个 城市 为 吉林 省 管辖 。 
第 三 组 ,沈阳 .大 连 、 鞍山、 抚顺 本溪、 丹东 ` 饥 州 、 彰 口 . 旱 新 辽阳、 盘锦 、 铁 岭 、 贡 
FH 88 P7 55 3x 14 个 城市 为 辽宁 和 省 管辖 。 








对 于 每 一 个 城市 ,如 末 还 想 看 到 更 加 详细 的 信息 ,例如 想 知 道 长 春 市 在 百度 百科 上 的 信 
M AHE http://baike. baidu. com/view/2172. htm, ix fip fei Di FP zr MK dA dE T M 
了 一 种 从 属 关 系 , 是 一 种 层次 模型 ,此 时 就 可 以 使 用 树 形 导 航模 式 。 如 果 按 照 这 样 的 分 组 在 
iPhone 上 展示 这 些 城市 信息 ,需要 使 用 三 级 视图 ,如 图 7-26 所 示 。 























Ball em 网 页 X 文库 BM T$- 
长 春 进入 词 条 




















图 7-26 树 形 导航 模式 实例 
使 用 Xcode 构建 树 形 导航 模式 实例 ,可 以 通过 Xcode 5 提供 的 工程 模板 Master-Detail 








Application ,但 是 不 够 灵活 ,本 例 可 以 采用 Single View Application 模板 ,这样 更 加 灵活 。 
具体 的 设计 步骤 如 下 : 首先 启动 Xcode, 单 击 File New-- Project 菜单 ,在 打开 的 

Choose a template for your new project 界面 中 ,选择 Single View Application 工程 模板 , 创 

建 一 个 名 为 TreeNavSample 工程 。 打 开 Main. storyboard 文件 ,删除 原来 生成 的 View 





9873€ ”应 用 程序 导航 | 


Controller ,重新 从 对 象 库 中 拖 电 一 个 Navigation Controller 到 设计 视图 上 ,如 图 7-27 所 示 。 


[ez ] 


图 7-27 JE% Navigation Controller 到 设计 视图 








7.4.3 一 级 视图 实现 


我 们 先 设 计 一 级 视图 ,修改 一 级 视图 的 标题 ,选择 视图 中 的 导航 栏 ,打开 右边 的 属性 检 
A fy ,修改 Navigation Item 一 Title 属性 为 “城市 信息 ”, 如 图 7-28 所 示 。 人 然后 选择 表 视 图 ， 
打开 属性 检查 需 , 如 图 7-29 所 示 , 选 择 表 视 图 为 静态 表 ,选择 Table View 一 Content 属性 为 
Static Cell, 





. ) 加 Table View Controller - 问 市 信息 ) «Navigation Item - 城市 信息 DEBETO OO 
Navigation Item 


Title | 城市 信息 














图 7-28 修改 一 级 视图 标题 


选中 表 视 图 中 的 单元 格 视 图 ,如 图 7-30 所 示 , 选 择 Table View Cell Style 属性 为 
Basic, 选 择 Table View Cell—> Accessory 属性 为 Disposure Indicator。 使 用 相同 的 方法 设置 
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图 7-29 选择 表 视 图 为 静态 表 


其 他 两 个 单元 格 。 双 击 第 一 个 表 视 图 单元 格 ,使 其 处 于 修改 状态 ,如 图 7-31 左 图 所 示 , 修 改 
为 “黑龙 江 省 ”, 然 后 将 其 他 的 依次 修改 为 “吉林 省 ”和 “辽宁 省 ”, 如 图 7-31 右 图 所 示 。 


Table... ) — Table... ) 和 Table View Section ^ — Table View Cell 
=| = 

















图 7-31 修改 表 视 图 单元 格 内 容 


7.4.4 二 级 视图 实现 


下 面 设 计 二 级 视图 , 用 来 显示 该 省 中 城市 列表 , 从 对 象 库 中 拖 忠 一 个 Table 
ViewController 到 设计 视图 上 ,然后 , 按 住 Control 键 从 吉林 省 单元 格 拖 电 鼠标 到 Table 
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ViewController( 刚 刚 拖 上 鼻 ), 然 后 松 开 鼠标 弹出 对 话 框 ,如 图 7-32 所 示 , 选择 Selection 
Segue—push 菜单 项 。 



























图 7-32 连接 Segue 


修改 二 级 视图 的 标题 为 吉林 省 信息 ,并 依据 一 级 视图 的 方法 把 表 视 图 设 为 静态 表 , 在 
Table View Section 里 修改 Plows 为 7 个 项 目 。 然 后 选择 Table View Cell> Style 属性 为 
Basic ,选择 Table View Cell— Accessory 属性 为 Detail Disposure, 如 图 7-33 所 示 。 使 用 相 
同 的 方法 设置 其 他 7 个 单元 格 。 双 击 第 一 个 表 视 图 单元 格 , 使 其 处 于 修改 状态 ,修改 为 “长 
春 ”, 然 后 将 其 他 的 依次 修改 为 吉林 省 的 相关 城市 信息 ,如 图 7-34 右 图 所 示 。 


ble View Co... ， Table View > li Table View Section > — Table View Cell 





Identifier Reuse Identifier | 


(M indent While Editing 
[_] Shows Re-order Controls 








图 7-33 设置 单元 格 属性 
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[| 


吉林 省 信息 


图 7-34 设置 二 级 视图 属性 


7.4.5 三 级 视图 实现 
下 面 设计 三 级 视图 ,用 来 显示 该 城市 的 详细 信息 ,从 对 象 库 中 拖 忠 一 个 ViewController 


到 设计 视图 上 ,然后 , 按 住 Control 键 从 长 春 单 元 格 拖 忠 鼠标 到 ViewController( 刚 刚 拖 忠 )， 
然后 松 开 上 鼠标 弹出 对 话 框 ,如 图 7-35 所 示 ,选择 Selection Segue push 35 Lit , 


吉林 省 信息 
"ou (D » 


(D 





图 7-35 连接 Segue 


第 7 章 “应 用 程序 导航 an 





修改 三 级 视图 的 标题 为 长 春 市 信息 ,由 于 这 个 视图 中 应 该 用 一 个 Web 视图 来 展示 从 百 
度 百科 获得 城市 信息 ,但 是 Web 视 几 要 想 实现 这 些 效果 需要 编写 程序 代码 ,可 以 放置 一 张 
图 片 展示 效果 ,所 以 从 对 象 库 中 拖 虹 Image View 到 三 级 视图 设计 界面 ,如 图 7-36 Brzs , £A 
后 在 Image View 属性 检查 带 中 选择 Image 属性 为 截取 的 图 片 。 为 了 保持 图 片 比例 ,选择 
Image View 凡 寸 检查 器 ,如 图 7-37 所 示 尺 寸 设置 Image View, 





fiew Controller - 长 春 市 信息 ) | | View > | | Image View D B Gm'w 5o 


-— Highlighted | IT] 
长 春 市 信息 


Interaction | | User Interaction Enabled 
CJ Multiple Touch ui 
Alpha | 1[j 
eackoround 
Tint 
Drawing (V Opaque [| | Hidden 
(Vf Clears Graphics Context 
|.) Clip Subviews 
IV Autoresize Subviews 


Stretching [ok Ld 
-— 10) -—- 














rn behavior of reusable views in a... 


— C [ Text View - Displays multiple 
== | lines of editable text and sends an 
2—— | action message to à target... 


图 7-36 jak, Image View 到 三 级 视图 
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o Bl View Con... > @ View Con... > | View > | Image View - web.png 

















长 春 市 信息 








intrinsic Size | Default (System Defined) ;| 


Constraints 

The selected views have no constraints. At build 
time explicit left, top, width, and height 
constraints will be generated for the view. 








D fl o E 
Dennes me attriDputes ana 
|， behavior of reusable views in a... 


m Image View - Displays a single 
image, or an animation described 
— byan array of images. 








c7 | Text View - Displays multiple 


i | lines of editable text and sends an 
SSS action message to a target... 


图 7-37 ix E Image View 尺寸 





7.5 模 态 视图 


在 导航 过 程 中 ,有 了 时候 需 要 暂时 放弃 主要 任务 转 而 做 其 他 的 次 要 任务 ,完成 次 要 任务 之 
后 要 再 回 到 主要 任务 上 。 这 个 “次 要 任务 ”就 是 在 “ 模 态 视图 ”中 完成 的 。 图 7-38 是 模 态 视 
图 示意 图 ,从 图 中 可 以 看 到 ,主要 任务 是 “接收 邮件 ”一 “查看 邮件 ”, 在 这 个 过 程 中 用 户 很 
有 可 能 要 编写 新 的 邮件 , “编写 邮件 ”是 次 要 任务 , 当 用 户 把 邮件 编写 完成 , 束 会 关闭 新 邮件 
视图 , 回 到 查看 邮件 视图 继续 进行 主任 务 。 


第 7 章 ”应 用 程序 导航 | 








enesenn ---- GD ———————— quu - 
RULAR S WI E) - -+ (撰写 邮件 ) - = 


图 7-38 ” 模 态 视图 示意 图 





7.5.1 iOS 中 的 模 态 视图 


模 态 视图 默认 人 情况 下 从 屏幕 下 方 请 出 来 ,完成 任务 后 需要 关闭 这 个 模 态 视图 ,如 有 宁 不 关 
闭 就 无 法 做 别 的 事情 ,这 就 是 " 模 态 ”的 含义 , 它 有 必须 啊 应 和 处 理 的 意思 。 因 此 , 模 态 视图 
We 因为 10S 只 有 一 个 Home 键 。 所 以 Android 和 
Window Phone 上 的 应 用 就 不 会 遇 到 这 些 问 题 , 因 为 在 Android 和 Window Phone 的 应 用 
可 以 通过 设备 上 的 “ 返 Meet. 
图 7-39 展示 的 是 iPhone 上 的 邮件 应 用 , 单 击 左 图 中 的 书写 按钮 加 ,会 弹出 右 图 的 新 
邮件 视图 。 
iPad 5 iPhone 呈现 的 模 态 视图 有 所 不 同 。iPad 应 用 可 以 有 4 种 呈现 模 态 视图 的 形式 : 
Full Screen, Page Sheet, Form Sheet 和 Current Context, 
m Full Screen 是 全 屏 状 态 ,为 默认 呈现 的 样式 ,iPhone 上 只 能 全 屏 呈现 
m Page Sheet 的 宽度 是 固定 的 768 点 ,因此 ,在 iPad BS ft Bé s 式 下 就 会 如 图 7-40 PÆ 
图 显示 ,而 在 竖 屏 模式 下 则 全 屏 呈 现 ( 如 图 7-40 ED. 
m Form Sheet 是 固定 的 540X 620 点 ,无论 是 模 屏 还 是 竖 屏 情况 下 呈现 尺寸 都 不 会 有 
人 
m Current Context 与 父 视 图 控制 各 呈现 方式 相同 。 


7.5.2. Wi E W 


下 面 通过 实例 介绍 利用 Xcode 5 工具 实现 模 态 视图 原型 设计 ,该 实例 如 图 7-41 所 示 ， 
在 左边 的 视图 中 单 击 右 下 角 的 国 按 钮 ,弹出 右边 的 模 态 视图 。 在 右边 的 模 态 视图 中 单 击 
Cancel 或 Save 按钮 可 以 关闭 模 态 视图 。 

具体 的 设计 步骤 如 下 : 首先 局 动 Xcode, Hil; File New Project 沫 单 , 在 打开 的 
Choose a template for your new project 界面 中 ,选择 Single View Application 工程 模板 , 创 
建 一 个 名 为 ModalSample LÆ. MI R FE rp di R, Button 到 设计 视图 ,然后 修改 它 的 
Type 属性 为 Info Light, 如 图 7-42 所 示 。 

我 们 再 从 对 象 库 中 拖 虹 一 个 View Controller 到 设计 界面 ,然后 选中 这 个 视图 控制 器 

选择 Xcode 菜单 中 的 Editor Embed In— Navigation Controller 菜单 项 ,这 个 操作 可 以 将 

视图 控制 顶 从 入 到 导航 控制 部 ( 见 图 7-43), 估 入 到 导航 控制 奏 后 会 添加 一 个 导航 栏 。 修 改 
导航 栏 标题 为 “详细 信息 ”, 并 拖 暇 两 个 Bar Button Item 到 导航 栏 左 右 , 选 择 左 边 按 钮 为 
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新 邮件 
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Dear long jia, Your Apple ID, 
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creating your Pulse account. You can no... 
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图 7-39 iPhone 上 的 邮件 应 用 呈现 的 模 态 视图 (上 边 是 10S 6 风格 、 下 边 是 10S7 风格 ) 
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RARAY iPad 














RAR Pad 
olwlistsiniriviul:lol» ME 
^isiojiFiGIHIJ2Ikl1L. NEM 
" "S 
EE 2ixicivieiNjwvje 9 
m 
w o = = 
”一 — m NEN 





图 7-40 iPad 上 的 邮件 应 用 (上 边 是 iOS 6 风格 、 下边 是 10S 7 风格 ) 


Cancel ,右边 按钮 为 Save, 如 图 7-44 所 示 。 
在 上 一 个 视图 中 选择 国 按 钮 , 按 住 Control 键 从 按钮 拖 电 鼠标 到 Navigation 
Controller ,然后 松 开 鼠标 弹出 对 话 框 ,如 图 7-45 所 示 ,选择 Manual Segue->modal 菜单 项 。 
可 以 修改 弹出 模 态 视图 的 Segue 属性 ,也 可 以 设置 弹出 模 态 视图 的 动画 效果 ,设置 
Segue 的 Transition( 跳 转动 画 效 果 ) 属 性 ,如 图 7-46 所 示 , Transition 属性 包括 Cover 
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Carrier 会 5:36 PM E Carrier 会 5:36 PM = 
Cancel 详细 信息 Save 


© 





图 7-41 模式 视图 实例 


ain.storyboard ) |E Main.storybo... > [E] View Controll... ) @ View Controller > |_| View)! Binon! D B Gw9^2 | 
Button 


Background [Default Background Imad» | 
Shadow oset| oo) 0 
Wid Height 











图 7-42 添加 Button 到 设计 界面 
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Ses Product g Source Contro Vindov Help 

Align > :proj 一 - Main.storyboard - 

Arrange b 4:15 

Resolve Auto Layout Issues D DES 
| Pin >  Main.storyboard (Base) View ! 
see P 

Size to Fit Content | Navigation Controller | | Navigation Controller | 

Localization Locking e Tab Bar Controller 

Canvas 


A 


Hide Document Outline 
Reveal in Document Outline 


Apply Retina 4-inch Form Factor 
a——— ''!——— MÓN À (Bü 





图 7-43 TEL E FE il ii LN SL il A 


Cancel 详细 信息 Save 


图 7-44 设计 导航 栏 





Vertical (M pE 7 F my E), Flip Horizontal (水 平 翻转 )、Cross Dissolve (交叉 变换 ) 和 
Partial Curl( 部 分 卷曲 )。 

到 目前 为 止 , 单 击 图 按钮 ,就 可 以 弹出 模 态 视图 了 ,但 是 在 模 态 视图 中 单 击 Save 和 
Cancel 按钮 没 法 关 财 模 态 视图 。 dU eR ada 写 代 人 码 ,但 这 样 比较 麻烦 ,可 以 通过 
在 模 态 视图 实现 这 个 效果 ,当然 这 只 是 一 种 变通 的 做 法 而 已 。 如 图 7-47 选中 模 态 视图 的 
Cancel, 按 住 Control 键 ,从 Cancel 按钮 拖 忠 鼠标 到 要 跳 转 回去 的 视图 ,然后 松 开 鼠标 弹出 
对 话 框 ,选择 Manual Segue>modal 菜单 项 。 
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AETAII*ETIHTIM GTI GEHE EN 


图 7-45 选择 Segue modal 





—2 F8 D Navigation Controler -0 





v Flip Horizontal 
Cross Dissolve 
nao CA 
Storyboard Segue 
entifer[ |] ^ 
svem 可 
Tes [D wk — — s 
(M Animates | 


图 7-46 选择 Segue 属性 
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View Controller o 


图 7-47 ”关闭 模 态 视图 


7.6 ”组合 导航 





前 文 提 到 的 3 种 导航 模式 并 不 一 定 孤 立 使 用 ,有 时 可 根据 用 户 的 需求 组 合 使 用 。 
图 7-48 展示 的 “Nike 十 iPod” 应 用 是 一 球 针 对 运动 爱好 痢 的 iPhone 应 用 。 这 个 应 用 的 导航 
采用 了 标签 导航 和 树 形 结构 导航 相 结 合 的 方式 。 我 们 看 到 ,3 个 标签 可 导航 进入 3 个 不 同 
的 模块 ,在 每 个 模块 的 内 部 又 采用 了 树 形 结构 的 导航 ,层次 深度 为 3 层 。 





TF CENTUM 
xb 
GET BEDHAYA ies 


FÀ EN Cmn 





图 7-48 iPhone 上 的 “Nike 十 iPod” 应 用 
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在 图 7-49 里 我 们 看 到 ,在 第 二 个 标签 “我 的 体育 锻炼 ”里 可 以 添加 体育 锯 炮 项 目 , 这 
诊 加 界面 台 是 采用 模仿 视 图 的 方式 呈现 的 。 


ee á -| 





A rss 


MP 


"A 


I E 消耗 目标 的 体育 锻炼 


步行 校准 
未 校准 








图 7-49 iPhone 上 “Nike 二 iPod” 应 用 的 模 态 视图 





iOS 应 用 的 个 性 化 设计 





苹果 公司 很 讲究 产品 设计 的 视觉 因素 ,因此 在 为 10S 平 台 设 计 应 用 产品 的 时 候 , 绝 不 
能 忽视 视觉 上 的 美感 和 品味 。 同 时 ,大 部 分 用 户 在 接触 一 球 应 用 的 内 容 和 功能 之 前 ,都 会 从 
感性 上 对 应 用 的 视觉 效果 和 个 性 体验 有 所 评价 。 而 这 个 评价 ,会 直接 影响 用 户 对 应 用 的 深 
入 了 解 程度 ,以 及 应 用 在 移动 设备 中 存在 的 寿命 。 也 就 是 说 , 当 我 们 试图 尝试 一 球 应 用 的 时 
候 , 如 果 界 面 的 视觉 体验 非常 棒 , 即 使 它 不 是 我 们 需要 的 内 容 或 功能 ,也 会 愿意 把 它 留 在 设 
备 里 ,深入 挖掘 以 备 后 用 或 介绍 给 其 他 用 户 ; 反 过 来 说 ,如 果 应 用 界面 平淡 无 奇 或 不 太 友 
好 ,即使 它 是 我 们 需要 的 内 容 或 功能 ,也 会 从 心理 上 排斥 它 , 快 速 地 从 应 用 里 得 到 上 自己 需要 
H Zi Vü Je: EIU E US Y o 

因此 ,我 们 要 投入 更 多 的 精力 打造 应 用 产品 的 视觉 体验 ,从 艺术 的 角度 上 打动 用 户 。 本 
章 将 为 大 家 由 浅 入 深 地 展现 提高 应 用 视觉 体验 的 方法 ,通过 精心 的 包装 和 修饰 让 你 的 应 用 
充满 个 性 和 吸引 力 。 与 此 同时 ,经 过 前 面 的 论述 ,我 们 能 够 依据 10S 平台 的 导航 、 控 件 和 布 
局 的 规范 ,严谨 地 设计 出 符合 OS 平台 的 高 保 趴 原型 ,但 是 能 人 否 从 专业 的 角度 去 完善 、 修 
改 , 甚 至 打破 规范 去 继续 完成 我 们 的 设计 ,是 需要 很 多 的 经 验 和 撤 术 文 持 的 ,本 章 会 从 各 个 
角度 一 一 地 为 大 家 阐明 。 


8.1 个 性 化 你 的 应 用 


前 文 曾经 提 到 ,应 用 设计 的 控件 .导航 和 基本 布局 要 符合 规范 要 求 , 这 样 才能 适应 10S 
平台 产品 的 硬件 要 求 和 风格 特点 。 这 样 的 话 ,界面 设计 似乎 没有 想象 的 那么 难 , 我 们 只 需要 
根据 规范 模板 安排 好 大 的 布局 ,选择 好 导航 方式 ,把 相应 的 控件 对 号 入 座 了 台 可 以 完成 一 亚 应 
用 的 原型 设计 了 。 这 种 流水 线 一 样 的 设计 方式 看 上 去 似乎 既 简 单 双 有效 ,而 且 设 计 出 来 的 
应 用 也 很 美观 和 规矩 ,毕竟 10S 平台 在 发 布 相应 规范 的 时 候 是 充分 考虑 到 审美 和 视觉 关系 
的 ( 见 图 8-1)。 然 而 ,对 于 那些 希望 自己 的 应 用 作品 在 个 性 体验 和 视觉 冲击 力 上 有 所 追求 
的 设计 师 来 说 ,这 样 的 结果 上 略 显 平淡 了 些 。 

作为 设计 师 ,我 们 不 甘心 也 不 希望 目 己 的 作品 与 平台 上 的 其 他 应 用 整齐 划一 而 缺乏 个 
性 ,那么 就 要 试 着 改变 我 们 的 设计 ,打破 它们 的 规范 ,让 我 们 的 应 用 脐 颖 而 出 ,吸引 眼球 。 但 
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成 熟 的 设计 师 ,我 们 无 论 做 出 任何 突破 和 改变 ,部 需要 建立 在 对 1058 ^P f BU yE 29 DA 
了 解 的 基础 上 ,同时 ,具备 对 图 形 元 素 、 色 彩 规律 .字体 样式 空间 特效 各 个 方面 的 高 超 品味 
和 天 才 的 把 握 能 力 。 是 不 是 听 起 来 有 点 遥 不 可 及 ?” 其 实 并 没有 你 想象 中 的 那么 难 ,我 们 的 
改变 和 突破 可 以 由 浅 入 深 的 开始 ,一 步 一 步 ,循序 渐进 地 完成 ,而 且 在 接 下 来 的 几 市 里 ,我 们 
会 从 上 述 的 四 个 方面 ,分 别 以 成 功 的 设计 作品 为 案例 和 大 家 分 诗 优 秀 设 计 师 的 经 验 。 


8.1.1 M MIRA F 


想 要 使 应 用 界面 达到 与 众 不 同 , 具 有 个 性 化 ,首先 可 以 从 一 些 简 单 的 细 市 开始 。 

1. 色彩 和 底 纹 

先 来 看 一 看 10S 应 用 的 原始 色调 ( 见 图 8-1) ,iOS 6 及 之 前 版 本 是 蓝 灰 色 ,iOS 7 则 是 灰 
日 或 纯 黑 色 , 发 现 了 吗 ? 都 非常 的 稳重 或 深厚 ,用 意 很 明显 : 一 个 是 在 视觉 上 不 喧 宾 夺 主 ， 
使 用 户 把 注意 力 集中 到 内 容 和 图 片上 去 ; 另 一 个 就 是 给 设计 师 巨 大 的 修改 和 突破 的 空间 。 
因此 ,我 们 的 设计 和 改变 要 在 领会 好 上 述 这 两 个 用 意 的 前 提 下 进行 , 既 要 把 应 用 的 色彩 个 性 
和 底 纹 创意 表现 出 来 ,又 不 能 太 过 突出 ,使 用 户 的 注意 力 分 散 而 影响 阅读 和 欣赏 , 喧 宾 夺 主 。 
图 8-2 为 大 家 展示 了 两 款 成 功 的 添加 色彩 和 底 纹 的 案例 。 

“印象 笔记 ”通过 为 导航 栏 定 义 了 一 块 鲜 明 的 草绿 色 , 使 这 于 应 用 充满 了 旅行 与 从 林 的 
味道 ,不 过 色 块 的 使 用 点 到 为 止 , 绝 不 泛滥 ,界面 整体 依然 透射 出 108 经典 的 淡 灰 色 ; 而 
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(a) PDF Expert (b) 印象 笔记 


图 8-2 i1OS 平 台 的 “PDF Expert” 和 “印象 笔记 ” 





“PDF Expert” 应 用 , 则 是 色彩 置换 和 底 纹 修 饰 的 完美 组 合 , 尤 其 是 应 用 的 界面 背景 的 肌理 ， 
让 用 户 从 视觉 上 产生 丰富 的 感官 效应 ( 亚 光 金属 的 触摸 感 ) ,有 创意 ` 有 细 斑 \ 有 个 性 。 这 两 
球 应 用 巧妙 地 运用 了 色彩 置换 或 纹理 添加 ,只 是 在 平台 原生 规范 的 基础 上 稍 加 改动 ,就 融 来 
了 非常 脱俗 和 精美 的 视觉 体验 。 

2. 图 形 和 字体 

可 以 从 图 形 和 字体 两 个 细节 为 切入 点 ,把 应 用 的 元 素 个 性 体现 出 来 ( 见 图 8-3)。 字 体 
可 以 从 标题 人 手 ( 最 好 不 要 轻易 改变 内 容 的 字体 ,iOS 规范 的 字体 见 8.4.1 0 ,而 图 形 ,我 
们 可 以 发 挥 想 象 对 控件 的 样式 进行 重新 创意 设计 。 这 个 过 程 对 设计 师 的 图 形 造 型 能 力 和 字 
体 把 握 能 力 有 所 考验 。 
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Although Instagram for iPhone has included 
Ihe option to straghten images for some 
Ime, an engineenng post published 
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(a) Pulse News (b) The Verge 





图 8-3 1OS 平 台 的 “Pulse News” 和 “The Verge” 
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"Pulse News" 是 一 天 很 有 个 性 的 新 闻 客 户 端 , 除 了 精彩 的 logo 设计 及 稳重 的 这 灰 色调 
外 ,对 图 形 的 细节 设计 也 是 一 个 觉 点 ,标签 上 的 纸张 掀 开 折 三 的 效 末 很 有 质感 ,这 个 小 小 的 
个 性 化 细节 为 界面 的 整体 格调 增色 不 小 。 而 “The Verge” 则 是 成 功 把握 了 导航 栏 上 的 标题 
字体 ,给 平淡 无 奇 的 界面 添加 了 格调 和 活力 。 


8.1.2 添加 装饰 


对 细节 的 修改 和 符 换 从 操作 和 构思 来 说 郡 是 比较 和 商 易 的 ,同时 , 效 末 也 并 不 是 非常 突 
出 ,往往 起 到 画龙点睛 的 作用 。 接 下 来 ,我们 就 要 在 界面 的 整体 效果 上 有 一 些 突破 了 ,首先 
是 添加 材质 和 纹理 特效 ,这 种 设计 方式 ,在 10OS 6 及 之 前 的 传统 拟 物 化 设计 中 尤为 突出 。 当 
然 , 对 10S7 之 后 的 局 平 化 视觉 风格 的 界面 设计 也 很 有 帮助 ( 见 图 8-4)。 
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理 , 使 应 用 的 视觉 体验 和 风格 品味 很 突出 。 这 种 处 理 方法 在 拟 物 化 应 用 界面 设计 里 可 以 称 
为 经 典 ,仔细 观察 我 们 可 以 体会 到 ,设计 师 在 肌理 和 材质 的 处 理 上 把 握 得 尤为 细腻 , 尽 可 能 
地 达到 视觉 上 的 触摸 感 ,这 也 是 体现 拟 物 化 应 用 界面 格调 和 品味 的 显著 特征 ,只 是 对 设计 师 
的 技术 要 求 要 高 一 些 了 。 而 新 厂 “Circle "应 用 的 界面 则 是 典型 的 1i9S 7 局 平 化 风格 的 典型 
代表 ,通过 高 亮 、 精 类 的 底 纹 映衬 半 透 明 的 图 标 和 控件 ,同样 使 界面 充满 了 魔幻 般 的 空间 
AIC 

同时 ,针对 拟 物 化 效果 我 们 还 可 以 为 应 用 的 界面 添加 空间 和 立体 特效 。 无 论 是 控件 还 
是 育 隶 ,我们 都 可 以 通过 绘图 软件 的 各 种 图 形 元 系 和 图 层 样 式 ( 如 浮雕 、 阴 影 、 渐 变 和 光 译 )， 
细致 地 打造 出 空间 感 、 层 次 感 和 立体 感 。 

IOS 6 上 的 “报刊 杂志 ”以 及 “iBooks” 应 用 不 但 实现 了 真实 的 空间 立体 效果 ,而 且 配 上 细 
致 的 木头 材质 和 丰 宇 的 阴影 ,把 拟 物化 效果 用 得 超凡 脱俗 。“Moves ”应 用 则 是 对 几何 图 形 
和 抽象 造型 进行 了 光泽 和 阴影 处 理 ,使 界面 看 上 去 既 精 美 又 大 气 ( 见 图 8-5) 。 不 过 ,空间 和 
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(a) 报刊 杂志 (b) Moves 
图 8-5 iPad 上 的 “报刊 杂志 ”和 IOS SÉ & Dm * Moves" 


立体 效果 也 并 不 完全 是 拟 物化 效果 的 专利 ,通过 大 胆 的 设计 和 精心 的 制作 ,立体 空间 效果 同样 
HJ PIXY iOS 7 及 扁平 化 风格 的 应 用 进行 修饰 ,制造 出 超凡 脱俗 的 视觉 体验 ,如 图 8-6 所 示 。 
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(a) Safari (b) Jetstter (c) Clear 


图 8-6 i1OS 平 台 的 “Safari”、“Jetstter” 和 “Clear” 


纵 观 以 上 实例 就 可 以 体会 到 ,优秀 的 设计 师 是 可 以 巧妙 地 利用 这 些 特效 手段 ,探索 出 既 
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能 适合 应 用 特点 ,又 能 显示 出 108 平台 的 表现 方法 和 视 沉 语言。 那么 完成 了 进一步 对 材 
质 \ 纹 理 及 空间 特效 的 修改 和 突破 后 ,下 一 步 束 是 要 完全 地 抛 莽 10S 平台 的 设计 规范 ,设计 
出 全 新 的 导航 方式 、 控 件 样 式 和 视觉 元 系 。 难 度 肯 定 会 加 大 ,但 如 果实 现 ,我 们 束 真 正 意义 
上 地 达到 了 独树一帜 和 超凡 的 个 性 体验 。 


8.1.3 纯 个 性 化 的 该 计 


我 们 所 说 的 “ 纯 个 性 化 ”, 束 是 抛弃 10S 平台 的 设计 规范 和 标准 模式 ,万 麻 距 径 设 计 出 
一 套 全 新 的 视觉 和 交互 体验 ,以 达到 绝对 的 独 树 一 帆 和 个 性 设计 。 那 么 它 的 难度 就 不 再 仅 
仅 是 细节 的 把 握 、 特 效 的 处 理 以 及 字体 和 色调 的 选择 了 ,最 关键 的 环节 ,仆人 在 于 前 期 的 功 
能 结构 安排 和 创意 的 阶段 了 。 当 然 ,我们 "* 纯 个 性 化 ”的 目标 绝 不 是 否定 和 抛 痉 应 用 平台 原 
有 的 规范 ,而 是 要 以 更 加 合理 ,更 加 有 效 和 更 加 独特 的 方式 解决 应 用 目 生 的 内 容 特性 和 功能 
要 求 , 同 时 纳入 适合 的 图 形 、 色 调和 字体 ,增强 界面 的 视觉 个 性 和 亲和力 。 
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图 8-7. 1i1OS 平 台 的 “NBC News" 
我 们 先 来 看 一 看 “NBC News” 新 闻 客 户 端 ( 见 图 8-7)。 由 于 新 闻 的 版 块 比较 多 ,造成 
iOS 平台 的 标准 导航 栏 无 法 适应 应 用 的 要 求 ,设计 师 的 天 赋 因 此 得 以 展现 ,创作 出 了 这 种 极 
军 想 象 力 的 花瓣 形 的 导航 结构 , 既 解 决 了 导航 问题 ,又 达到 了 以 超 强 的 视觉 冲击 力 和 极 具 个 











性 的 图 形 创 意 吸引 眼球 的 目的 。 然 而 底 色 和 界面 细节 的 处 理 上 仍然 能 体会 到 10S 平台 的 


味 直 ,真正 做 到 了 既 能 独树一帜 ,又 能 与 平台 的 特性 相 适 应 。 


第 8 章 iOS 应 用 的 个 性 化 设计 | 





再 来 看 看 iPad 上 的 “Swackett”( 一 款 天 气 预 报应 用 ) 和 “Transfer-File sharing" C— 3X Xx: 
件 管理 和 收藏 应 用 , 见 图 8-8) ,部 是 非常 普通 的 功能 型 应 用 ,但 是 其 极 具 个 性 化 的 设计 结 
却 给 用 户 带 来 了 非常 轻松 、 愉 悦 的 独特 体验 。“Swackett” 不 仅 能 从 界面 色调 上 体会 天 气 的 
变化 ,还 可 以 提示 你 佩带 雨具 和 注意 增 减 衣服 ,清新 的 色调 和 独特 的 界面 分 割 方式 充满 了 生 
活 气 县 。“Transfer-File sharing” 则 是 使 用 了 松散 、 姿 乱 的 布局 方式 , 像 是 把 所 有 的 文件 散 
沙 在 了 昌 面 上 ,通过 在 页 面 上 随意 地 拖 动 来 找到 你 的 收藏 和 文件 ,还 可 以 把 它们 有 忆 出 果 面 扔 
挥 。 这 种 奇特 的 文件 管理 方式 确实 很 有 个 性 ,使 具有 同样 个 性 和 生活 习惯 的 用 户 非 常 着 
迷 。 不 过 仔细 观察 细 市 ,你 会 发 现 这 两 球 应 用 的 图 形 转角 痢 是 圆 角 ,这 当然 是 苹果 产品 
的 特征 。 
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(a) Swackett (b) Transfer-File sharing 


图 8-8 1OS ¥ & Bj Swackett" 和 “Transfer-File sharing” 


以 上 几 款 应 用 都 是 个 性 化 用 户 体验 设计 的 典范 ,无论 是 创意 还 是 细节 处 理 ,都 充满 了 设 
计 师 的 天 才 想 象 和 突破 精神 ,因此 ,我 们 在 设计 应 用 产品 的 过 程 中 , 既 要 有 规范 严谨 的 态度 ， 
又 要 有 大 胆 尝 试 的 勇气 ,这 才 是 游 丸 有 余 的 设计 高 手 的 状态 。 那 么 接 下 来 ,就 要 深入 地 从 几 
个 方面 ,与 大 家 分 享用 户 体验 设计 中 完善 界面 视觉 设计 的 经 验 了 。 


8.2 图 形 元 素 与 构成 理念 
在 进一步 深入 的 把 握 视 觉 体验 之 前 ,要 先 从 设计 最 基本 的 图 形 元 素 和 解决 页 面 布局 开 


台 , 同 时 谈 谈 如 何 更 好 地 把 握 两 者 关系 。 而 这 一 部 分 的 经 验 是 成 为 专业 设计 师 最 重要 的 基 
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8.2.1 BÉIR IS DUREE 


首先 要 谈 谈 界 面 的 图 形 设 计 。 因 为 造型 是 一 切 视 沉 印象 的 根本 ,所 以 我 们 设计 出 来 的 界 
面 ,一 定 要 具备 美观 而 严 齐 的 网 形 元 素 , 它 直接 影响 了 用 户 对 应 用 界面 的 第 一 印象 ,能 否 把 握 
好 界面 的 图 形 设 计 束 变 得 尤为 午 要 。 那 我 们 就 完 来 看 看 10S 平台 的 基本 图 形 的 样式 吧 。 

不 仅仅 是 iOS 平台 的 界面 风格 , 笠 果 公司 所 有 产品 的 图 形 风 格 , 总 的 来 说 都 是 非常 统 
一 和 鲜明 的 ,通过 图 8-9 大 家 可 以 清晰 地 感觉 到 ,精致 的 贺 角 人 处理 和 接近 椭圆 形 的 按钮 风格 
是 它们 不 变 的 图 形 风格 特点 。 然 而 ,这 些 细小 的 圆 角 绝 不 像 看 上 去 的 那么 简单 ,实际 上 每 一 
个 加 角 的 细 市 比例 关系 部 是 非常 考究 的 ,因此 在 进行 相应 的 细 市 设计 的 时 候 一 定 要 多 观察 、 


多 桂 仿 、 多 尝试 。 




















图 8-9 苹果 公司 产品 的 图 形 元 素 


图 8-9 表现 了 10S 平 台 进 行 图 形 设计 的 基本 思路 ,设计 也 要 在 符合 这 个 造型 特点 的 前 
提 下 ,对 图 形 元 素 进 行 调 整 .修饰 和 创新 。 即 使 在 纯 个 性 化 的 设计 中 ,也 要 在 图 形 风 格 上 做 
到 有 据 可 寻 。 

图 8-10 中 的 两 款 应 用 界面 设计 都 作出 了 一 些 个 性 化 的 创新 ,但 是 在 图 形 元 素 上 都 遵循 
了 iOS 平 台 的 风格 特点 ,因此 即使 整体 上 它们 10S 平台 的 特征 并 不 明显 ,但 是 依然 能 够 从 
界面 的 细节 中 体会 到 它们 是 OS 平台 的 移动 应 用 。 

当然 ,图 形 元 素 设 计 也 不 是 必须 遵守 规范 而 一 成 不 变 的 ,只 要 是 适合 应 用 的 功能 特点 和 
界面 的 视觉 需要 ,以 及 具备 丰富 的 想象 力 ,我 们 完全 可 以 按照 自己 的 方式 重 塑 图 形 元 素 。 但 
是 这 个 过 程 需要 设计 师 具 备 高 超 的 设计 品味 和 专业 的 细节 把 握 能 力 , 最 起 码 能 达到 与 10S 
平台 原 有 规范 的 图 形 设计 不 相 上 下 的 水 准 , 否 则 的 话 设 计 出 来 的 界面 会 显得 幼稚 和 粗糙 ,使 
得 整个 应 用 在 视觉 上 给 人 的 感觉 很 劣质 。 成功 的 案例 很 多 ,在 图 8-11 中 可 以 看 到 ， 
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(a) 印象 笔记 食 记 (b) Circle 


图 8-10 ”iOS 平 台 的 “印象 笔记 一 一 食 记 ”和 “Circle” 
“Gogobot” 在 导航 栏 和 标签 柱 的 设计 上 都 进行 了 章 新 ,加 入 了 精美 的 书签 设计 和 按键 强化 
处 理 , 使 应 用 界面 的 整体 显得 美观 、 鲜 明和 大 方 。 而 “uShetch” 从 整体 风格 上 就 走 了 生活 化 
和 轻松 愉悦 的 路 子 ,使 得 对 图 形 细节 的 设计 必须 摆脱 规范 的 使 用 涂鸦 、 随 性 和 手工 绘制 的 效 
果 , 配 上 精美 通 真 的 相册 底 图 看 起 来 很 时 尚 。 





(a) Gogobot (b) uShetch 


图 8-11 10S ¥ & B Gogobot" fll *uShetch" 
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由 此 可 以 看 出 ,个 性 化 的 图 形 元 素 的 设计 首先 要 与 应 用 界面 的 整体 风格 相 匹配 ,同时 设 
计 的 过 程 要 有 创意 和 想象 力 , 更 重要 的 是 细节 处 理 要 有 品位 和 格调 ,这 样 才能 保证 界面 设计 
达到 超越 10S 平台 规范 的 水 准 。 


8.2.2 页 和 面 布局 与 构成 理念 


图 形 元 每 和 页 面 布局 是 相互 依存 、 密 不 可 分 的 ,只 不 过 大 部 分 人 在 打开 界面 的 同时 , 痢 
会 被 图 形 、 文 字 和 人 色彩 所 吸引 ,不 会 注意 到 整体 的 布局 方式 和 构图 的 设计 ,最 多 能 感觉 到 视 
党 上 很 舒服 合理 ,而 对 设计 师 的 精心 设计 和 非凡 创意 往往 是 在 纯粹 的 个 性 化 设计 下 才能 够 有 
所 体会 。 这 里 所 谈 的 布局 ,主要 是 与 岁 形 元 又 紧密 相关 的 页 面 布局 ,或 者 说 页 面 的 构 几 形式 ， 
也 包括 静态 页 面 和 功能 界面 。 那 么 各 个 移动 平台 在 处 理应 用 的 页 面 布局 上 部 有 哪些 形式 呢 ? 
比较 通用 的 几 种 布局 方式 ,我 们 可 以 通过 以 下 的 几 组 原型 草图 和 案例 了 解 一 下 。 
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图 8-12 ”列表 式 布局 ,iOS 平 台 的 “Dots” 和 “Foxit Mobile PDF" 


在 图 8-12 中 可 以 看 到 的 这 种 布局 和 构图 方式 , 称 为 “列表 式 ”, 就 是 表 视 图 控件 的 体现 。 
它 是 最 简单 也 是 最 直观 的 一 种 布局 方式 ,以 从 上 至 下 的 顺序 递 进 排列 ,可 以 在 中 间 插 入 图 片 
或 视频 ,也 可 以 把 图 片 和 标题 并 排放 置 (如 "Dots”) ,但 大 的 秩序 不 能 蒜 乱 。 

图 8-13 表现 的 布局 方式 称 为 "网 格式 ”或 者 叫 " 陈 列 式 ? 布 局 。 顾 名 思 义 ,了 驶 是 把 需要 使 
用 的 工具 或 需要 阅读 的 书刊 陈列 在 书 染 或 工具 柜上 ,以 方便 拿 取 ,就 是 iOS 集合 视图 控件 
的 体现 。 因 此 ,这 种 布局 方式 的 优点 不 言 而 喻 ,就 是 查找 方便 、 操 作 人 简单 ,我 们 看 到 三 大 平台 
的 主页 面 都 使 用 这 种 方式 ,说 明了 它 的 用 户 体验 价值 是 非常 高 的 。 网 格式 和 陈列 式 两 种 布 
局 在 第 7 草 曾 经 作为 应 用 平 合 的 规范 化 控件 提 到 过 ,这 里 将 站 在 视觉 平衡 和 构图 元 素 的 角 
度 上 ,分 析 它 们 的 个 性 化 趋势 。 

我 们 通常 看 到 的 “网 格式 ”布局 都 是 如 图 8-13 这 样 以 九宫 格 方式 整齐 排列 的 ,这 也 是 由 
我 们 的 视 党 惯性 所 决定 ,那么 如 果 稍 微 打破 以 下 这 样 的 视觉 惯性 ,将 它 的 分 割 方式 重新 定义 
一 下 ,也 许 会 出 现 很 独特 的 视觉 体验 。 图 8-14 提供 了 几 种 不 同 的 陈列 方式 ,从 视觉 上 打破 
了 排列 的 稳定 性 。 虽 然 与 iOS 的 界面 相似 ,但 是 Andriod 平台 的 界面 上 可 以 安装 各 种 形状 
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图 8-13 网 格式 布局 ,iOS 平台 上 的 “Voices 2"78I*WSJ Live" 





和 大 小 的 “窗口 部 件 ”, 打 破 了 iOS 界面 上 的 那 种 形状 位 置 整齐 划一 的 阵列 方式 和 视觉 稳定 
性 ,从 而 得 到 了 独特 的 视觉 体验 。 而 Windows Phone 的 界面 则 是 对 整体 的 画面 结构 进行 了 
重新 的 分 割 ,抛弃 了 行列 分 明 、 面 积 平等 的 观念 , 像 汉 德里 安 ( 人 入 兰 抽象 派 画 家 ) 一 样 把 画面 
分 割 成 大 大 小 小 , 文 离 破 碎 ,打破 了 空间 和 面积 的 稳定 性 ,从 视 党 上 达到 了 绝对 的 独树一帜 。 
iOS 平台 上 的 ”ushetch” 则 是 把 标签 松散 、 随 意 摆 放 在 界面 上 , 配 上 手写 的 文字 ,从 视 党 上 给 
AGESSA AR ERE TR ERST TEIG RS. 











EE Windows Phone 8 





(a) Andriod 4.0% £5 7€ [fij (b) Windows Phone 8 平台 界面 (c) uShetch 


图 8-14 Andriod 4. 0 ^E & Æ M , Windows Phone 8 平台 界面 和 i1OS 平 台 上 的 “uShetch” 
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这 三 个 案例 都 清晰 地 传达 了 一 个 设计 上 的 观念 , 那 就 是 “可 以 相似 ,但 绝 不 能 雷同 ”, 虽 
然 iOS 界面 那 种 泾 渭 eie he ae os eey 但 是 我 们 还 能 在 它 的 
基础 上 挖掘 出 不 同 的 构成 方式 和 视觉 体验 。 不 过 ,这 些 创意 看 似 简单 ,在 实现 的 过 程 中 是 非 
常 严 说 和 考究 的 , 绝 不 是 随意 地 分 制 和 摆 放 。 

图 8-15 和 图 8-16 表现 的 是 同一 种 导航 方式 的 两 种 构图 形式 ,统称 为 “选项 卡 ” 布 局 。 
图 8-15 是 上 下 式 的 “选项 卡 ”, 也 就 是 导航 栏 安置 在 顶端 或 底 端 ,图 8-16 是 左右 式 的 “选项 
卡 ”, 也 就 是 把 导航 栏 安置 在 左 侧 或 右 侧 ,在 平板 电脑 上 比较 多 见 。 这 是 一 种 常见 且 实 用 的 
交互 方式 ,前 面 已 经 从 功能 角度 阐述 了 它 的 优点 和 设计 方法 ,这 里 我 们 站 在 视觉 角度 上 谈 它 
的 个 性 , 那 就 是 标签 和 内 容 可 以 在 画面 上 形成 大 小 呼应 和 图 形 对 比 , 在 视觉 上 给 以 人 立体 交 
叉 的 空间 感 , 是 非常 经 典 的 布局 方式 ,而 且 还 可 以 与 前 面 的 两 种 布局 相 结 合 ,增强 用 户 的 交 
互 体验 感 。 


I 


图 8-15 上 下 式 的 “选项 卡 ”,1iOS 平台 的 “Speedtest” 和 “XnView Fx” 
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图 8-16 ”左右 式 的 “选项 卡 ”,i1OS 平 台 的 “Svpply” 和 “twitter” 
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以 上 提 到 的 是 比较 常见 的 ,也 是 OS 平台 经 党 使 用 的 布局 和 构图 方式 ,那么 对 于 应 用 
界面 的 设计 来 说 ,布局 方式 绝 不 仅仅 就 上 述 的 这 几 种 ,更 多 的 布局 方式 和 导航 模式 等 行 我 们 
构思 和 创意 ,怎样 才能 挖掘 出 来 呢 ? 这 里 建议 : 想 要 成 为 专业 的 设计 师 , 必 须 了 解构 成 的 
理念 ,因为 这 是 现代 设计 的 基础 理论 。 

什么 是 “构成 ”” 就 是 把 相同 或 不 同 的 元 系 组 合 在 一 起 ,形成 新 的 事物 ,这 个 过 程 称 为 构 
成 。 听 起 来 似乎 并 不 很 难 , 但 其 中 的 内 在 规律 ,组 合 方式 和 细节 原理 是 非常 深奥 和 庞杂 的 。 
当然 ,这 里 不 可 能 把 它 的 原理 深入 完整 地 讲解 清楚 ,我 们 的 目的 是 要 通过 “构成 ”的 理念 , 创 
意 和 完善 我 们 应 用 界面 的 视觉 体验 ,更 多 与 “构成 ”相关 的 理论 ,我 们 可 以 通过 其 他 的 著作 或 
方式 得 到 。“ 构 成 ”分 成 三 大 方向 : 平面 构成 .色彩 构成 和 立体 构成 ,统称 “三 大 构成 "。 最 早 
的 理论 体系 是 在 20 世纪 初 德 国 的 “ 包 紧 斯 ”学院 中 产生 的 ,由 于 学 院 的 讲师 .车 名 抽象 钱 画 
家 康定 斯 基 的 一 部 著作 《后 、 线 、 面 ) 而 得 名 。 本 节 依 据 的 是 “平面 构成 ”的 原理 ,而 在 下 一 市 
会 谈论 “色彩 构成 ”的 理论 知识 。 

“平面 构成 ”最 基础 的 原理 ,就 是 在 一 个 平面 上 ,将 图 形 元 素 依 据 不 同 的 骨 盎 框 染 进行 组 
合 。 这 个 “平面 ”就 是 移动 设备 的 界面 ; 这 个 “图 形 元 素 ”, 就 是 在 8.2.2 市 中 论述 的 内 容 ; 而 
骨骼 框架 ”, 就 是 本 节 人 研究 的 布局 方式 。 我 们 现在 要 构思 和 尝试 的 ,就 是 把 一 堆 图 形 元 系 
网 标 、 和 标签 和 按钮 ) 纳 入 到 不 同 的 骨骼 征 以 中 进行 排列 ,有 多 少 种 骨骼 ,就 有 多 少 种 排列 方 
式 。 而 实际 上 , 骨 融 的 样式 是 无 穷 无 尺 的 ,只 需要 从 其 中 挑选 出 适合 界面 需要 和 功能 特点 的 
NETT Y . Bl 8-17 就 是 平面 构成 中 篆 见 的 几 种 骨骼 样式 。 根 据 这 些 图 形 线 框 ,我们 把 图 像 元 
素 纳入 进去 进行 排列 ,再 进行 细微 调整 和 特效 的 发 挥 ,得 到 的 结 末 往 往 是 超 乎 想象 创新 布 
局 。 而 且 不 但 骨 锅 框架 的 样式 无 穷 , 元 系 的 排列 方式 更 是 丰富 多 样 , 所 以 只 要 理解 了 构成 的 
理念 ,选择 好 正确 的 思路 ,进行 纯 个 性 化 创新 和 探索 并 不 困难 。 

















e 


















B TR 里 复 与 近似 结合 近似 骨骼 FEFE FI HA 





A 


GE FT HA WT HA E 554 [RIS fT ^s [FI ET Hi 发 散 骨 骼 


图 8-17 平面 构成 的 骨骼 样式 
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重复 骨 融 就 是 最 笛 见 的 网 格 阵 列 的 构图 方法 ,不 过 它 的 变化 可 是 非常 多 样 的 ,只 要 把 图 
形 元 素 按照 一 种 第 态 或 惯性 进行 排列 都 属于 重复 骨骼 ; 近似 骨 骨 是 在 重复 骨骼 的 基础 上 对 
图 形 .面积 或 造型 进行 改变 ,使 它们 相似 但 不 重复 ; 特异 骨骼 则 是 在 重复 崩盘 的 基础 上 突然 
产生 一 个 比较 大 的 差异 ,使 视觉 产生 突变 ,这 儿 个 骨骼 属于 比较 基础 和 使 用 的 骨骼 框 染 。 后 
面 的 几 个 骨骼 从 名 称 了 字面 意 思 束 可 以 理解 它们 的 构图 形式 和 视觉 特点 ,它们 属于 比较 为 类 
或 个 性 化 的 骨髓 框架 样式 。 

接 下 来 看 几 组 利用 上 述 相 对 简单 的 骨骼 框架 进行 重 构 排列 的 布局 方式 ,可 以 清楚 地 体 
会 到 平面 构成 理论 对 应 用 界面 的 布局 和 构图 市 来 的 奇效 ( 见 图 8-18)。“AppAdvice” 在 普通 
的 重复 骨 骨 上 稍 加 改变 ,在 元 系 排 列 的 时 候 纵 向 地 把 骨骼 错位 ,打破 了 排列 整齐 和 构图 单一 
的 视觉 平衡 而 达到 了 独树一帜 。“News Gallery” 则 大 胆 地 使 用 了 重复 和 近似 相 结 合 的 骨骼 
框 以 ,把 文件 的 位 置 `, 大 小 和 芷 密 关 系 安 排 得 错落 有 致 。 “Letterpress "是 一 天 简单 有 趣 的 拼 
字 洲 戏 ,无 论 是 交互 方式 还 是 界面 操作 都 很 出 众 ,在 拼 字 过 程 中 可 以 对 所 有 的 字母 卡片 进行 
随意 排列 和 整理 ,从 视觉 上 符合 特异 骨骼 的 特点 ,从 秩序 到 打破 秩序 的 视 沉 过 程 给 用 户 市 来 
独特 的 视觉 体验 。 
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(a) AppAdvice (b) News Gallery (c) Letterpress 


8-18 iiOS 平 台 上 的 “AppAdvice “News Gallery" “Letterpress” 


接 下 来 ,看 一 组 利用 相对 个 性 的 骨骼 框架 进行 排列 的 案例 ( 见 图 8-19). "Reader HD" 
以 及 前 面 图 8-7 中 的 “NBC News” 都 精彩 地 利用 了 发 散 式 骨骼 ,得 到 的 视觉 个 性 也 是 非常 突 
出 的 ,这 个 骨骼 的 另 一 个 特点 就 是 可 以 带 来 运动 的 体验 效果 (旋转 或 发 射 ) ,而 且 便于 导航 。 
“Mover 十 ”与 图 8-8 的 “Transfer-File sharing ”应 用 相似 ,都 是 利用 了 路 密 骨 骼 的 重 琶 和 分 
散 的 视觉 特点 ,体现 出 了 应 用 松散 和 随意 的 用 户 体验 个 性 。 这 里 也 借鉴 Andriod 平台 的 
"Google Muisc Player”, 它 是 同时 利用 了 渐变 与 空间 相 结 合 骨 铝 的 完美 典型 ,绚丽 的 三 维 空 
间 特 效 极 大 地 增强 了 应 用 的 个 性 体验 ,是 可 以 与 经 典 的 “ 拟 物 化 ”风格 相 匹 敌 的 男 一 种 个 性 
化 视觉 处 理 方式 。 
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(a) Reader HD (c) Google Music Player 


图 8-19 1i1OS 平 台 上 的 “Reader HD” 和 “Mover 十 ”、Andriod 平台 的 “Google Muisc Player" 


8.2.3 图 形 与 布局 间 的 关系 


了 了解 了 图 形 元 素 的 重要 性 和 构成 理念 的 奇效 ,我 们 的 设计 就 变 得 轻松 和 有 条 理 了 ,下 面 
就 是 把 我 们 精心 设计 的 图 像 放 置 于 变化 多 端的 骨骼 框架 中 去 了 。 看 上 去 似乎 顺理成章 ,但 
是 操作 起 来 并 不 像 我 们 想象 的 那样 简单 。 我 们 一 定 要 清醒 地 认识 到 ,完美 的 设计 绝 不 单单 
是 徘 巧 妙 的 构思 和 非 几 的 创意 ,还 有 一 个 非常 重要 的 也 是 决定 性 的 因素 ,就 是 细节 把 握 。 

在 成 为 专业 设计 师 的 修炼 之 路 上 ,很 多 经 验 和 技术 是 需要 很 长 时 间 的 摸索 和 很 多 案例 
的 积累 的 ,因此 ,在 处 理 设计 细 市 的 时 候 , 我 们 要 多 以 经 典 的 成 功 案 例 作 为 依据 ,耐心 观察 ， 
仔细 揣摩 ,这 样 才 是 快速 成 为 设计 高 手 的 捷径 。 现 在 我 们 需要 解决 的 是 怎样 合理 地 把 图 形 
元 素 放 置 在 骨骼 框架 里 ,也 就 是 如 何 把 握 好 图 形 和 布局 之 间 的 关系 。 因 此 ,我 们 先 通 过 
图 8-20 的 两 个 成 功 的 案例 来 体会 一 下 成 功 的 设计 高 手 是 怎样 搞定 的 。 

“Google 十 ”也 许 是 我 们 大 家 最 经 常 使 用 的 iOS 应 用 ,无 论 打 开 过 多 少 次 ,有 几 个 人 会 留 
意 到 这 款 应 用 的 经 典 细节 ?7 在 非常 简单 的 重复 排列 下 ,每 一 个 "消息 卡片 > 之 间 都 和 留 有 大 约 
20 像素 的 缝 际 , 这 个 颖 际 不 宽 也 不 罕 ,恰到好处 ,使 界面 上 每 一 个 单元 之 间 既 混 然 一 体 叉 相 
互 独立 。 配 上 IOS 特有 的 圆 角 边 缘 和 阴影 的 特效 ,使 画面 的 空间 感 加 强 , 每 个 “消息 卡 户 ” 
弹 起 在 空中 ,等 待 用 户 来 点 击 。 如 果 你 更 加 细致 地 揣摩 ,会 发 现 圆 角 的 比例 和 阴影 的 深浅 都 
是 非常 考究 .恰到好处 的 , 试 着 用 软件 把 它们 临 苏 一 下 绝对 让 你 受益 菲 浅 。 "USA Today" 
更 是 一 款 值 得 我 们 从 细节 上 认真 观察 和 学 习 的 应 用 。 使 用 单线 段 而 不 是 交差 线 来 分 割 画面 
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图 8-20 ”iOS 平 台 上 的 “Google 十 ”( 左 图 ) 和 “USA Today” A KI) 





是 这 款 应 用 界面 设计 细节 上 的 亮点 ,我 们 可 以 看 到 设计 师 是 怎样 处 理 线 段 的 ,这 是 一 种 立体 划 
狗 的 效 采 ,表现 的 是 刀片 在 纸张 上 划 过 的 效 末 。 由 于 过 于 的 细 肛 以 至 于 无 法 看 得 很 清楚 ,但 是 
在 界面 整体 上 映射 出 了 非常 舒服 和 整洁 的 视觉 效果 ,体现 出 了 设计 师 的 专业 的 细节 把 握 能 

通过 对 以 上 几 款 应 用 的 分 析 ,我们 明白 了 在 应 用 用 户 体 验 设计 中 创意 和 细 厄 的 关系 , 创 
意 成 弥 了 好 的 构思 ,而 细 市 则 决定 了 成 败 。 有 和 多少 应 用 设计 由 于 粗糙 的 局 部 处 理 而 花 送 了 
优秀 的 创意 ,而 很 多 平淡 无 奇 的 构思 由 于 精彩 的 细节 处 理 而 登 上 经 典 之 列 ( 见 图 8-21)。 对 
于 应 用 界面 来 说 ,图 形 和 布局 容易 确定 ,但 它们 之 间 的 关系 和 细 闻 处 理 才 是 设计 师 需 要 不 断 
HE ESCRITO UE B o 
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(a) Vital Signs DB (b) Haze 天 气 预报 


图 8-21 1OS 平 台 上 的 “Vital Signs DB” 和 “Haze A^ fij" 
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8.2.4 在 不 同 的 平台 和 设备 上 


这 是 一 个 非常 容易 忽视 的 问题 ,我们 经 第 看 到 有 些 设计 师 的 应 用 设计 没 做 任何 修改 ,就 
从 Andriod 平台 上 移植 到 iOS 平 台 的 设备 里 (或 者 反之 )。 表 面 看 上 去 似乎 没什么 问题 ,使 
用 起 来 也 可 以 顺手 ,但 是 这 样 做 是 存在 很 多 问题 的 。 

首先 ,每 个 平台 设备 的 使 用 方法 不 一 样 ,这 一 点 在 第 2 草 里 做 了 比较 详细 的 前述 。 那 么 
由 此 就 产生 了 很 多 的 连 囊 问题 ,首先 是 导航 栏 的 项 目 需 要 调整 ,我 们 知道 OS 平台 的 设备 
是 没有 返回 键 的 ,因此 必须 在 导航 栏 里 加 以 补充 。 同 时 两 个 平 全 的 按钮 和 控件 样式 不 同 , 如 
末 不 加 修改 很 可 能 会 造成 误解 ,从 而 市 来 很 多 麻烦 。 最 后 ,每 个 平台 的 规范 和 理念 不 一 样 ， 
虽然 我 们 可 能 是 纯 个 性 化 应 用 ,但 是 从 理念 上 还 是 要 符合 相关 平台 的 细节 处 理 和 理念 ,否则 
给 用 户 留 下 不 伦 不 类 或 者 很 山 罕 的 印象 。 因 此 ,一 定 要 注意 在 不 同 平台 之 间 移 植 的 时 候 要 
根据 每 个 平台 的 规范 和 特色 重新 设计 ,包括 它们 的 图 标 ( 见 图 8-22) 。 
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图 8-22 “印象 笔记 ”应 用 在 10S 平台 和 Andriod ¥ R E 


妨 一 个 需要 注意 的 问题 ,就 是 同一 区 应 用 在 同一 个 平台 的 不 同 设备 上 移植 的 时 候 , 也 需 
要 重新 进行 设计 ,这 里 主要 是 指 把 手机 设备 上 的 应 用 移植 到 平板 电脑 上 去 。 由 于 手机 屏 适 
比较 狭小 ,界面 上 的 各 种 元 系 相 对 拥挤 和 堆积 ,如 果 把 它 直 接 放 大 到 平板 电脑 的 屏 夺 上 ,所 
有 的 元 系 就 会 变 得 到 条 和 粗糙 ,因此 ,必须 将 所 有 的 元 系 重 新 放置 和 排列 。 这 时 平板 电脑 上 
开阔 的 空间 里 会 显得 空荡荡 的 ,完全 可 以 把 原 有 的 设计 推翻 ,设计 一 球 内 容 和 元 系 更 加 丰 
盏 、 更 适合 平板 电脑 的 界面 。 
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图 8-23 iOS PEK“ H Jj" Nr HE fe iPhone 和 iPad 上 的 界面 设计 


从 图 8-23 中 可 以 看 到 ,iOS 6 上 的 “日历 " 应 用 在 iPhone 和 iPad 上 的 界面 设计 可 以 说 
是 大 相 径 寿 ,几乎 没有 相同 之 处 , 谁 能 想到 它们 会 是 同一 球 应 用 ?因此 可 以 得 出 结论 ,无 论 
是 设备 之 间 还 是 平台 之 间 , 对 应 用 进行 移植 的 时 候 , 在 设计 上 一 定 不 能 偷懒 ,一 定 要 根据 情 
DL ,做 出 最 适合 用 户 和 移动 设备 的 设计 。 


8.3 ” 矢 于 把 握 色 彩 


下 面 开 始 应 用 界面 设计 的 色彩 环节 。 对 于 0S 平台 的 移动 应 用 设计 ,色彩 因 系 的 重要 
性 是 不 言 而 喻 的 ,因此 这 个 环节 对 于 我 们 能 否 完成 充满 视觉 吸引 力 和 个 性 鲜明 的 应 用 界面 
至 关 重 要 。 当 然 , 这 个 过 程 也 要 由 浅 入 深 、 循 序 渐进 地 完成 ,针对 没有 设计 和 美术 基础 的 读 
者 ,我们 会 在 开始 把 使 用 色彩 的 基本 原理 和 技巧 前 述 出 来 。 


8.3.1 了 解 色彩 的 规律 


人 类 的 眼睛 可 以 分 辨 的 色彩 可 以 说 是 无 穷 无 尽 ,能 够 在 移动 屏幕 上 显示 的 色彩 也 可 以 
百 万 计 , 那 么 无 论 能 看 到 多 少 种 色彩 ,实际 上 痢 是 由 三 个 闫 色 的 光 交 映 混 合 而 成 的 ,也 就 是 
“光谱 三 原色 ”, 这 是 针对 设备 的 成 像 原理 而 说 的 。 而 现在 要 讨论 的 色彩 搭配 理论 知识 是 建 
立 在 “物理 三 原色 ”的 基础 上 的 ,这 是 分 析 和 推理 色彩 结构 的 起 点 ( 见 图 8-24) 。 

红 、 页 、 蓝 三 原色 之 间 易 足 而 立 ,它们 可 以 相互 交融 、 相 互 过 渡 的 。 我 们 把 这 三 个 颜色 ， 
以 及 它们 之 间 的 过 渡 色 相互 连接 ,就 形成 了 一 个 色 环 ( 见 图 8-25)。 色 环 里 包含 了 所 有 的 颜 
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(a) 光谱 三 原色 (b) 物理 三 原色 
图 8-24 色彩 的 三 原色 


色 ,但 只 限于 颜色 的 基本 属性 ,我 们 称 之 为 "色相 >”。 千 万 别 小 看 这 个 色 环 , 它 是 我 们 之 后 进 
行 色彩 选择 和 搭配 很 重要 的 参考 工具 和 对 照样 本 。 


O00 


图 8-25 色相 环 的 形成 


色相 环 上 的 每 一 个 色相 都 有 两 个 发 展 趋势 : 一 个 是 明暗 ,逐渐 变 完 PoE 
变 瞳 成 为 黑色 ; 23 — 1 2e: 2 E E ERE A E) ,就 是 逐渐 银色 变 成 灰色 。 这 两 个 属性 我 们 可 
以 通过 Photoshop 里 的 “色相 /饱和 度 ” 工 具 来 体会 ( 见 图 8-26) 。 这 样 ,就 可 以 得 到 一 个 球状 
立体 的 色谱 , 称 为 “ 色 立 体 ”( 见 图 8-27)。 




















图 8-26 Photoshop 里 的 “色相 /饱和 度 ” 工 具 
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明暗 度 











色相 


纯度 


图 8-27 色 立 体 





除了 最 终 的 色 立 体 , 整 个 的 色彩 体系 结构 是 很 容易 掌握 的 。 而 掌握 色 立 体 的 诀 穷 , 束 是 
以 色 环 为 基础 ,所 有 的 颜色 在 圆心 发 展 的 过 程 发 后 纯度 变化 ,也 就 是 逐渐 褪色 变 成 灰色 ; I] 
上 发 展 逐 渐 加 腕 变 成 日 色 , 疝 下 发 展 逐 渐变 瞳 变 成 黑色 。 由 于 圆心 的 色彩 已 经 完全 衫 掉 , 所 
以 成 为 了 日 色 到 黑色 的 渐变 ,日 色 、 黑 色 以 及 它们 之 间 过 渡 的 各 种 灰色 我 们 统称 为 “无 
彩色 ”。 

这 样 ,就 把 色彩 的 知识 体系 完整 地 呈现 给 读者 了 ,在 学 科 里 我 们 把 这 个 体系 称 为 "色彩 
构成 “下面, 就 是 如 何 利 用 这 个 色彩 体系 来 充实 到 我 们 的 应 用 界面 设计 里 了 ，。 


8.3.2 控制 色调 


首先 ,要 明确 一 个 观点 ,色彩 设计 的 本 质 并 不 是 添加 颜色 ,而 是 控制 颜色 。 具 体 来 说 ,在 
一 个 画面 上 并 不 是 颜色 越 多 越 好 看 ,这 是 初学 者 最 容易 犯 的 错误 。 因 为 颜色 越 多 ,看 上 去 就 
TEX HI e 2E SL ,反而 不 容易 给 用 户 留 下 深刻 的 印象 。 我 们 开始 税 握 色彩 设计 ,最 关键 的 就 是 要 
学 会 把 握 住 色调 。 色 调 的 意思 就 是 使 色彩 在 视觉 上 形成 统一 ,不 管内 容 多 充实 ` 变 化 多 丰 
E ,我 们 都 从 视觉 上 把 它们 约束 在 一 个 色彩 范 于 里 ,这 样 才 能 保持 住 界面 的 整体 风格 和 个 性 
化 的 特征 。 只 要 能 做 到 这 一 点 ,色彩 把 握 就 成 功 了 一 半 , 因 此 色调 的 观念 非常 重要 。 把 握 住 
色调 最 简单 的 办 法 就 是 只 用 一 个 颜色 来 设计 ( 见 图 8-28) 。 

这 两 秋 应 用 都 通过 定义 一 个 鲜明 或 单纯 的 颜色 ,达到 了 应 用 界面 的 个 性 化 。 由 于 色调 
纯粹 而 统一 ,给 用 户 留 下 了 深刻 的 色彩 印象 。 在 此 说 明 一 下 ,前 文 提 到 的 “无 彩色 ”( 黑 、 日 、 
灰 ) 在 色彩 设计 的 过 程 中 一 般 不 把 它 当 作 凑 色 来 考虑 ,但 是 它们 在 对 色彩 进行 陪衬 和 分 割 时 
所 起 的 作用 却 是 至 关 重 要 的 ,后 文 还 会 进一步 介绍 。 此 案例 中 也 能 够 体会 到 ,在 无 彩色 的 衬 
托 下 色彩 更 加 的 人 鲜明 和 个 性 。 

然而 ,过 于 单一 的 色彩 有 时 候 会 使 画面 不 够 丰富 ,或 者 对 界面 中 的 各 种 元 系 缺 乏 表 现 
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图 8-28 10S Æ f: HJ" Makeover" 和 ”金山 词霸 ” 


力 。 我 们 可 以 进一步 地 在 保持 住 色调 的 基础 上 使 色彩 逐渐 丰富 起 来 。 其 中 一 个 方法 就 是 在 
基础 闫 色 上 调整 它 的 明暗 度 或 纯度 ( 见 图 8-29) 。 
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(a) Solar (b) SBS World News 


图 8-29 1iOS 平 台 的 “Solar” 和 “SBS World News" 


“Solar "通过 改变 了 基础 颜色 的 明暗 度 达到 细微 的 色彩 变化 的 。 而 "SBS World News" 
则 是 同时 在 基础 颜色 的 明暗 度 和 纯度 上 做 文章 ,使 色调 变 得 涤 簿 而 厚重 。 由 于 增加 了 色彩 
变化 ,界面 中 的 各 种 元 素 明 显 丰 富 活 跃 多 了 , 那 我 们 继续 下 去 。 在 保持 住 色调 的 基础 上 丰富 
色彩 的 万 一 个 思路 就 是 答 试 使 用 "邻近 色 ”或 “相似 色 ”.。“ 邻 近 色 ”和 ”相似 色 ”" 神 是 针对 色 环 
而 言 的 ,顾名思义 ,就 是 在 色 环 上 邻近 的 或 相似 的 颜色 。 

“邻近 色 一般 在 色 环 上 挨 得 比较 近 , 因 此 色彩 的 差异 比较 的 细微 ( 见 图 8-30 (200 ,. “AH 
似 色 ”就 相对 来 说 十 一 点 ,只 要 不 超过 90 都 可 以 ,色彩 差异 比邻 近 色 大 一 些 。 由 于 在 色 环 
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QOO 


(a) 邻近 色 (b) 相似 色 (c) 相似 色 
图 8-30 “邻近 色 ” 和 “相似 色 ” 


上 的 位 置 彼此 接近 ,所 以 这 些 颜色 看 上 去 比较 相像 ,从 而 有 力 地 保障 了 界面 色调 的 统一 性 ， 
通过 图 8-31 所 示 的 两 款 应 用 的 界面 ,我 们 可 以 很 明显 地 体会 到 这 一 
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(a) Circle Audi Porsche (b) Runkeeper 


图 8-31 iOS 平台 上 的 ”Circle Audi Porsche” fil" Runkeeper" 





现在 已 经 理解 了 把 握 色 调 的 用 意 , 也 学 会 了 控制 色调 的 方法 ,最 关键 的 是 要 有 建立 应 用 
界面 的 整体 色调 的 观念 。 有 了 它 ,我 们 的 界面 设计 最 起 码 不 会 在 色彩 方面 出 现 问题 ,更 重要 
的 是 可 以 理性 和 严 许 地 规划 我 们 的 应 用 界面 的 个 性 化 设计 。 

但 是 有 人 可 能 会 问 ,总 是 被 约束 在 一 个 色调 里 是 不 是 太 单 调 、 死 板 了 ,界面 的 色彩 印象 
和 视觉 风格 是 得 到 了 加 强 ， 但 还 不 是 党 得 有 些 过 于 保守 。 当 然 , 应 用 的 色调 丰富 与 否 主要 还 是 
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由 应 用 本 时 的 市 场 定 位 及 用 户 群 决定 的 ,但 是 从 设计 的 角度 来 说 ,我 们 的 色彩 把 握 绝 不 仅仅 
停留 在 单一 色调 的 范围 内 。 下 一 步 要 继续 让 色彩 丰富 起 来 ,让 界面 活跃 起 来 。 


8.3.3 (AX ano 


在 对 应 用 的 界面 进行 色彩 设计 的 时 候 , 尽 量 不 要 打破 画面 色调 的 统一 性 ,否则 很 容易 弄 
25 y dil ,使 画面 变 得 毫 无 主题 .次 乱 不 堪 。 但 是 很 多 情况 下 ,我们 由 于 功能 、 用 户 以 及 市 场 的 
需要 ,不 得 不 打破 色调 的 统一 性 ,来 追求 更 丰富 、 更 活跃 的 视觉 体验 。 当 然 ,这 会 对 设计 师 的 
视觉 品味 和 色彩 把 握 能 力 要 求 更 高 ,难度 也 不 言 而 喻 。 所 以 , 接 下 来 我 们 通过 一 系列 实用 的 
思考 方法 和 技巧 ,尝试 着 一 步 一 步 地 打破 色调 的 约束 ，。 

1. 焦点 反差 

由 于 功能 或 应 用 结构 的 需要 ,经 背 需 要 在 界面 中 突出 一 些 局 部 或 者 细 贡 元素, 实现 提示 、 
警告 每 作用 。 这 个 时 候 , 不 得 不 选择 一 个 非常 醒目 的 颜色 来 达到 效 采 。 这 样 就 完全 地 打破 了 
色调 的 统一 性 。 其 实 ,问题 的 关键 在 于 色彩 区 域 的 大 小 和 对 比 , 只 对 局 部 和 细节 进行 突出 ,如 
果 色 彩 选 择 得 当 , 不 但 不 会 破坏 画面 ,还 能 对 画面 的 整体 效果 起 到 “画龙点睛 ”的 作用 ( 见 图 8-32). 
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可 以 看 到 ,两 款 应 用 都 对 局 部 的 控件 或 标签 使 用 了 与 整体 色调 完全 相反 的 颜色 ,使 它们 


看 上 去 非常 的 醒目 ,突出 了 相应 功能 的 重要 性 。 这 里 一 定 要 注意 , 想 要 色彩 突出 ,就 要 有 人 鲜 
明 的 对 比 ,除了 颜色 本 号 的 色相 对 比 , 还 要 有 明暗 上 的 对 比 ( 如 "Speedtest”) 和 纯度 上 的 对 


(a) Speedtest (b) Where to? 


图 8-32. 10S 2E & Bj Speedtest" fll ^ Where to?" 
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比 ( 如 “Where to”) 。 这 样 才能 真正 起 到 “画龙点睛 ?的 作用 。 
2. 双色 调 
Weiss 到 了 色彩 的 对 比 , 其 中 明暗 的 对 比 和 纯度 的 对 比 都 很 容易 理解 ,但 是 色相 的 对 比 
寺 别 说 明 一 下 。 因 为 对 于 无 穷 无 尽 的 色彩 来 说 , 哪 两 个 色彩 放 在 一 起 能 得 到 鲜明 的 对 


or trl iii 二 为 “互补 色 ” 和 “对 
比 色 ” 两 个 概念 ( 见 图 8-33). 





(a) 对 比 色 (b) 互补 色 (c) 对 比 色 
图 8-33 “互补 色 ” 和 “对 比 色 ” 


“互补 色 ” 就 是 在 色 环 上 两 极 相 对 的 一 组 颜色 ,也 就 是 ee a Na 
图 8-33(b)) ,这 是 色彩 对 比 的 极端 化 。 也 束 是 说 ,在 确定 了 一 个 颜色 的 前 提 下 ,想得到 与 它 
对 比 最 强烈 的 另 一 个 颜色 ,只 需要 在 色 环 上 找到 与 它 正 对 的 颜色 。 MEE ON 90 "小 于 
180" 的 各 组 颜色 ,我们 统称 为 “对 比 色 ”( 见 图 8-33(Ca) 和 (b))。 角 度 越 接近 180^ ,对 比 就 越 强烈 。 

掌握 了 色相 的 规律 ,就 可 以 大 胆 地 打破 单一 的 色调 ,尝试 在 画面 上 使 用 “双色 调 ”。 也 就 
是 说 ,为 了 得 到 比较 强烈 的 视觉 冲击 力 和 超 个 性 的 界面 设计 效果 ,可 以 选择 一 pa 
对 比 色 甚 至 互补 色 来 充实 我 们 的 界面 ( 见 图 8-34) ,用 两 个 色调 在 画面 上 交 相 呼 应 。 但 是 这 


Reveo introduction 


(3 Pay electricity bill dum 














[9] Get a haircut * 


* Li * $ 





(3 


(a) Things (b) Game Center (c) Trip Cost 


图 8-34 iOS 平 台 上 的 “Things”\iOS 6 上 的 “Game Center" fll" Trip Cost” 
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个 过 程 中 也 要 注意 尽量 保持 住 每 个 色调 的 相对 统一 和 完整 。 

由 于 使 用 了 两 个 对 比 度 比 较 强 烈 的 颜色 ,我 们 就 要 在 色彩 的 明暗 度 和 纯度 上 做 一 些 改 
变 , 否 则 的 话 , 过 于 强烈 的 对 比 会 使 用 户 感到 紧张 浮躁, 而且 容易 喧 宾 夺 主 ,减弱 了 应 用 的 
功能 和 内 容 。 我 们 可 以 通过 调 上 暗 一 个 色调 亮度 来 衬托 男 一 个 色调 ,使 它 更 加 人 鲜明 (如 
“Things”) ,或 者 同时 降低 两 个 色调 的 纯度 来 烘托 界面 上 的 其 他 元 素 ( 如 iOS 6 上 的 “Game 
Center") ,也 可 以 同时 对 两 个 色调 加 强 亮度 或 者 减弱 纯度 ,达到 与 界面 主体 内 容 的 统一 (如 
"Trip Cost), 。 总 之 ,不 要 让 这 两 个 色调 针锋相对 、 各 自 独 立 ,而 要 让 它们 之 间 和 谐 相 处 , 相 
互 衬托 。 如 果 能 做 到 , 那 别 说 是 两 个 色调 , 儿 个 色调 都 可 以 控制 得 游 直 有余。 

3. 色彩 融合 

下 面谈 谈 如 果 更 多 的 颜色 加 入 到 你 的 界面 上 ,应 该 如 何 应 对 和 把 握 。 在 处 理 “ 双 色调 ” 
时 我 们 谈 到 了 ,通过 同时 降低 各 个 颜色 的 纯度 ,或 同时 增加 、 降 低 它们 的 明暗 度 , 可 以 达到 多 
个 颜色 的 和 谐 统 一 ,因此 就 要 把 注意 力 专 注 在 色彩 的 明暗 和 纯度 的 变化 和 调节 上 了 。 
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(a) The Verge (b) Patchworks (c) Game Center 


图 8-35. 10S2E & Bj * The Verge” *Patchworkz" Xk fl 10S 7 上 的 “Game Center" 


通过 图 8-35 的 三 个 案例 可 以 体会 到 , 随 着 颜色 的 增多 ,我 们 对 色彩 纯度 和 明暗 度 的 调 
六 需要 更 加 的 细腻 和 多 样 。 虽 然 看 上 去 是 同时 地 增加 亮度 或 降低 纯度 ,但 是 真正 调节 的 时 
修 , 一 定 要 分 别 把 握 ,局 部 控制 。 不 单 是 颜色 本 里 的 变化 ,每 块 颜色 之 间 的 搭配 和 面积 关系 
也 要 反复 推 赦 细致 调整 ,使 它们 之 间 明 蜡 搭 配 , 对 比 鲜 明 ,相互 讨 托 。 

但 是 浊 竟 把 很 多 的 颜色 放 在 一 起 是 非常 姿 乱 ,也 是 极 难 控制 的 ,有 没有 什么 诀 穷 或 者 捷 
径 ,能 够 简单 快速 地 把 这 么 多 颜色 和 谐 地 放 在 一 起 ,又 不 会 相互 干扰 造成 色调 的 不 和 谐 ” 有 
一 个 很 有 效 的 方法 ,就 是 充分 利用 黑 .日 ` 灰 ,也 就 是 “无 彩色 ”。 前 文 兽 提 到 ,任何 颜色 都 可 
与 无 彩色 进行 搭配 ,而 且 可 以 把 它们 反衬 得 很 好 看 。 黑 色 可 以 把 颜色 衬托 得 很 侠 艳 ,而 日 色 
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可 以 使 颜色 显得 很 稳重 。 因 此 ,无 论 画 面 中 有 多 少 种 颜色 ,我们 只 要 用 黑色 、 白 色 或 不 同 深 
浅 的 灰色 把 它们 分 开 , 使 它们 彼此 隔离 ,而 又 都 与 无 彩色 进行 搭配 ,这 样 就 可 以 轻易 地 达到 
色彩 之 间 的 协调 与 搭配 了 。 
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(a) Dots (b) Vodio (c) NBC News 
图 8-36 iiOS 平 台 的 “Dots” 游 戏 “Vodio” 和 “NBC News" 


从 图 8-36 的 三 个 案例 可 以 看 到 无 彩色 在 调和 色彩 关系 中 起 到 的 奇效 。 我 们 甚至 不 必 
过 多 地 调 市 每 个 颜色 的 纯度 和 明暗 度 ,因为 任何 色彩 在 无 彩色 面前 都 是 非常 人 鲜明 的 。 不 过 
即使 这 样 ,我 们 也 要 根据 应 用 的 实际 情况 使 用 颜色 ,不 要 一 味 地 追求 色彩 的 丰 定 和 变化 ,这 
样 很 容易 适得其反 ,把 界面 变 得 这 无 主题 或 姿 乱 不 堪 。 


8.3.4 色彩 的 倾 回 性 


本 市 介绍 一 个 比较 特殊 的 问题 ,就 是 在 为 应 用 界面 选择 色调 或 色彩 搭配 的 时 候 要 注意 
色彩 的 心理 倾 回 和 风格 倾向 。“ 心 理 倾向 ”涉及 用 户 群 的 感性 特征 和 用 户 群 体 的 个 性 需求 ， 
而 “风格 倾 旬 ” 则 关注 应 用 的 市 场 定位 和 普 衣 特征 。 价 单 地 说 ,就 是 在 为 应 用 界面 选择 色调 
时 ,和 需要 了 人 解 这 个 颜色 背后 的 含义 和 给 人 市 来 的 心理 变化 。 

. 色彩 的 心理 倾向 

色彩 的 心理 倾向 研究 的 是 色彩 带 给 人 们 的 心理 变化 和 情绪 影响 。 作 为 设计 师 , 我 们 在 
对 应 用 界面 进行 个 性 化 设计 时 ,更 应 该 认真 了 解 每 一 个 色相 的 心理 倾向 特点 ,有 意识 地 针对 
应 用 的 个 性 方向 以 及 特定 的 用 户 群 体 选择 适合 的 色彩 。 以 下 是 各 个 颜色 在 心理 和 情绪 上 的 
倾 问 参考 : 

(1) 红色 通 稍 给 人 再 来 刺激 热情、 积极 和 奔放 ,还 有 喜气 和 举 福 等 ; 
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(2) 绿色 是 大 目 然 和 植物 的 颜色 ,有 和 生命、 年轻、 安全、 新 鲜 以 及 和 平 的 心理 倾向 ,给 人 
以 清 源 之 感 ; 

(3) 蓝 色 则 让 人 感到 悠远 、 宁 静 、 空 虚 和 清洁 等 ; 

(4) 粉红 色 是 女性 最 喜欢 的 色彩 ,具有 放松 和 安抚 情绪 的 效果 ; 

(5) 梯 色 给 人 亲切 、 坦 率 、 开 月 \ 健 康 的 感觉 ; 

(6) 黄色 是 明度 极 高 的 颜色 ,能 刺激 大 脑 中 与 焦虑 有 关 的 区 域 ,具有 敬告 的 效 采 ; 


— 























(7) 淡 黄 色 上 共有 天 真 、 浪 漫 娇嫩 的 感觉 ; 
(8) 紫色 是 优雅 浪漫, 并 且 具 有 噩 中 气质 的 颜色; 











(9) 黑色 具有 低调 WE .冷漠 和 防御 的 心理 特征 ; 

(10) 灰色 给 人 诚恳 .沉稳 、 考 完 的 心理 感觉 

(11) 日 色 的 特点 是 纯洁 、 神 圣 、 善 民 与 信任 ; 也 会 给 人 梦 纠 的 感 党 。 

当然 ,这 里 为 大 家 归纳 的 是 各 个 颜色 主流 的 心理 特征 ,并 不 全 面 , 而 且 每 个 颜色 在 色彩 
倾 问 以 及 明暗 和 纯度 上 的 变化 ,都 会 给 人 市 来 不 同 的 心理 感受 。 比 如 , 红 的 如 朱 稍 微 地 浑浊 
一 点 、 暗 一 些 , 就 会 给 人 血腥 锈蚀 的 感 党 。 因 此 ,对 颜色 的 细微 把 握 和 体味 ,需要 我 们 在 长 
期 的 设计 和 生活 中 观察 和 积累 。 

2. 色彩 的 风格 倾向 

色彩 的 风格 倾 回 与 色彩 的 心理 倾向 有 些 类 似 , 但 并 不 相同 。 心 里 倾 回 强调 了 鲜明 的 个 
性 ,而 风格 倾向 研究 的 是 普遍 性 和 共性 。 比 如 说 ,我 们 如 果 留 心 观 察 , 会 发 现 大 部 分 系统 维 
护 或 设置 类 的 应 用 都 选用 深蓝 色 ,而 阅读 类 的 应 用 界面 一 般 都 会 选用 谈 土 页 色 。 原 因 很 简 
单 ,深蓝 色 给 人 技术 、 精 密 和 科技 的 感觉 ,而 淡 土 黄色 丝 含 着 文 化 、 积 泻 和 竺 皮 卷 的 质感 。 那 
么 其 他 颜色 还 会 具有 什么 样 的 普遍 意义 呢 ? 

(1) 黑色 ,象征 权威 .高 雅 、 低 调 、 创 意 ; 

(2) 灰色 ,和 象征 智能 .成 功 、 权 威 、 考 究 ; 

D 白色 ,象征 信任 与 开放 ; 

(4) FER ,象征 权威 保守、 中 规 中 和 矩 与 务实 5 

(5) 神色 ,是 典雅 中 纺 含 平和、 亲切 的 意象 ; 

(6) 红色 ,象征 热情 .性 感 \ 权 威 、 目 信和 ,是 个 能 量 充沛 的 色彩 ; 

(7) 粉红 色 ,象征 温柔 、 甜 美 \、 浪 漫 ,没有 压力 ; 

(8) 橙色 ,有 是 于 母爱 的 特质 ,同时 象征 着 健康 和 亲情 。 

无 论 是 颜色 的 “心理 倾向 ”还 是 “风格 倾 各 ”, 都 需要 在 深入 了 解 应 用 的 用 户 群 体 和 市 场 
定位 的 基础 上 ,进行 理性 的 分 析 和 选择 ,不 要 想当然 地 按照 目 己 的 喜好 随意 地 选择 色彩 ,很 
容易 会 造成 用 户 的 误解 或 者 排斥 。 
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8.4 文字 的 处 理 


在 前 面 关 于 用 户 体验 设计 交互 特点 的 章节 里 曾经 提 到 过 处 理 文字 以 及 把 握 文 字 和 图 片 
关系 的 方法 。 也 就 是 作为 应 用 界面 上 必 不 可 少 的 视 党 元 系 ,我 们 应 尽量 使 文字 简短 或 将 成 
段 的 文字 分 割 处 理 成 文字 块 , 使 它们 成 为 能 够 在 界面 上 目 由 摆 放 的 视 沉 元素。 而 在 本 节 中 ， 
我 们 将 从 平台 规范 以 及 文字 本 吴 的 特性 上 , 谈 谈 界 面 设计 中 把 握 文字 元 素 的 字体 .文字 关系 
以 及 空间 位 置 的 方法 和 经 验 。 


8.4.1 选择 合适 的 字体 


虽然 三 大 平台 在 字体 设计 上 并 没有 做 出 明确 的 规范 要 求 ,毕竟 这 是 体现 应 用 之 间 相 互 
区 别 的 个 性 所 在 ,以 及 设计 师 的 风格 和 偏好 ,但 是 细心 的 设计 者 肯定 会 注意 到 ,每 一 个 平台 
都 有 自己 独特 的 规范 字体 ,主要 体现 在 各 平台 的 系统 功能 及 原生 应 用 中 。 那 么 就 先 来 看 看 
iOS 平台 的 规范 字体 的 样式 和 风格 吧 。 

如 图 8-37 所 示 ,iOS 6 包括 之 前 版 本 的 英文 字体 采用 的 是 Helvetica 系列 字体 ,而 中 文 
字体 采用 的 是 常州 华文 印刷 新 技术 有 限 公司 设 计 的 “黑体 - 简 ” 字 体 (Heiti SC), 108 7 有 所 
改变 ,英文 字体 采用 的 是 Neue Helvetica 系列 字体 ,而 中 文字 体 也 改 成 了 更 加 纤细 的 中 等 
线 体 。 














Helvetica Light Helvetica CE 
Helvetica LT Std CE 55 Roman 


Helvetica CE Oblique Helvetica LT 
Helvetica Bold 
Helvetica Black ah sedibus ze. D 
Helvetica Cyr Bold evelica L 
Helvetica Cyr Upright LEAS LightEx 





Helvetica LT Std Bold HelveticaNeue Lt 
中 文字 体 采 用 的 是 。 ”中 文字 体 采 用 的 是 
黑体 - 简 等 线 体 

(a) iOS 6 的 系统 字体 (b) iOS 7 的 系统 字体 


图 8-37 iOS 平 台 的 规范 字体 


这 些 规范 字体 对 我 们 的 应 用 界面 设计 有 什么 实际 意义 吗 ? 还 是 那 句 话 , 我 们 在 为 iOS 
平台 设计 应 用 界面 的 时 候 , 要 相信 它 的 品味 、 迎 合 它 的 风格 ,这 样 你 的 应 用 才能 够 看 上 去 比 
较 规 范 和 完善 ,与 其 他 应 用 能 够 整齐 划一 打成一片 。 当 然 , 从 应 用 界面 的 个 性 化 设计 来 讲 ， 
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我 们 似乎 并 不 一 定 非 要 选择 这 些 规范 字体 ,而 是 应 该 选择 各 式 各 样 的 字体 来 充实 我 们 的 界 
面 设计 。 但 事实 上 ,我 们 发 现 大 部 分 个 性 化 鲜明 的 设计 师 并 没有 放弃 这 些 规范 的 字体 而 去 
选择 其 他 的 个 性 字体 。 原 因 有 两 个 ,首先 个 性 化 的 设计 要 着 眼 于 大 处 ,比如 布局 构图、 色彩 
或 图 形 等 ,而 文字 的 细小 变化 并 不 会 给 人们 市 来 强烈 的 视觉 变化 ,而 一 旦 使 用 了 大 张 的 字 
体 , 很 容易 影响 用 户 的 阅读 惯性 从 而 产生 反感 ,毕竟 文字 主要 是 用 来 阅读 而 不 是 欣赏 的 。 男 
外 ,无 论 你 的 应 用 多 么 的 充满 个 性 ,最 终 还 是 应 该 保留 一 丝 相应 平台 的 特征 ,那么 字体 就 是 
最 适合 ,也 是 最 容易 被 用 户 接 受 的 细 市 。 

在 这 里 ,推荐 大 家 尽量 地 使 用 10S 平台 相应 的 规范 字体 ,但 是 总 会 出 现 一 些 特殊 的 创 
意 或 情形 而 不 得 不 选择 其 他 字体 。 在 这 里 我 们 给 大 家 一 些 意见 和 忠告 ,首先 是 尽量 选择 经 
典 字 体 而 不 要 选择 怪异 夸张 的 字体 ,原因 我 们 刚刚 阐述 。 经 典 字 体 主 要 包括 英文 的 各 种 黑 
体 、 罗 马 体 . 架 特 体 和 手写 体 , 汉 字 的 各 种 黑体 .宋体 和 楷体 等 。 




















14:15 mer" 


Blood 130/85 





Puise Rate 80 


Temperature 37.5 
S Weather 
Blood Sugar 105 | 


Pain 0 Light rain in the morning and overnight 
Today's high around 30 degrees and low 
f 22 degrees 





| 





(a) Vital Signs DB (b) Circle 


KI 8-38 1OS 上 的 “Vital Signs DB” Al "Circle" 


从 图 8-38 可 以 看 到 ,应 用 界面 的 个 性 化 设计 大 多 并 不 涉及 规范 字体 或 经 典 字 体 的 使 
H. m iOS 上 的 “Vital Signs DB” 的 局 部 使 用 了 比较 特殊 的 Courier New 字体 ,看 上 去 很 像 
老式 的 针 孔 打印 机 的 效果 ,但 是 字体 是 属于 英文 黑体 的 变种 。 

但 是 有 一 种 情况 例外 , 那 就 是 出 现在 界面 中 的 应 用 名 称 。 很 多 设计 师 为 自己 的 应 用 名 
称 精心 打造 了 非常 醒目 的 标题 样式 ,目的 是 为 了 产生 品牌 效应 或 给 用 户 留 下 深刻 的 视觉 印 
象 , 有 些 类 似 于 VI 设计 (企业 视觉 形象 设计 ) 的 做 法 ,把 应 用 名 称 作 为 商标 来 设计 。 当 然 ， 
这 个 时 候 你 可 以 充分 发 挥 你 的 个 性 想象 ,选择 更 加 个 性 、 男 类 甚至 夸张 的 字体 ( 见 图 8-39 ) 。 
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Photo Album 


| Create a fun music 
profile for yourself 


SET ETC 


12 JU PM 


MA 777/2722 27 2 now 


-— 
T m. 





434 64531 385 3606 





(a) Note'd (b) Sound Tracking 


图 8-39 1OS 上 上 的 “Note'd” 和 “Sound Tracking" 


8.4.2 推 玻 文字 的 四 个 要 系 


无 论 面 对 的 是 单行 文字 、 段 落 文字 还 是 文字 组 ,作为 专业 的 设计 工作 者 我 们 必须 同 
时 考虑 四 件 事情 ,也 就 是 文字 的 四 要 素 : 字体 大小. 字 距 ( 字 与 字 之 间 的 肩 距 ) 和 行距 
(每 行文 字 之 间 的 距离 )。 这 四 件 事 情 缺 一 不 可 ,这 对 于 应 用 界面 的 设计 和 细 市 处 理 也 是 至 
关 重 要 的 。 也 就 是 说 ,我 们 只 要 在 处 理 文字 的 时 候 同 时 考虑 到 了 这 四 个 问题 ,我 们 应 用 界面 
的 文字 元 系 从 视觉 上 束 得 到 了 保障 ,不 会 出 现 问 题 。 反 过 来 ,如 末 我 们 忽视 了 这 四 个 要 系 中 
的 任何 一 个 ,肯定 会 在 视觉 上 使 人 感到 有 所 从 缺 , 或 者 不 够 专业 和 细致 。 下 面 逐 一 进行 
4 T. 

FR EER NT IE E — 7] TS BREL as. 30€ 0, E UU ER P fc E A — 27 IE «Ae XC JUR 
视觉 效果 的 主体 。 因 此 我 们 特意 把 它 放 在 本 市 的 最 前 面 来 突出 它 的 主体 地 位 。 那 么 我 们 接 
下 来 谈 一 谈 文字 的 大 小 。 

三 大 平台 在 文字 使 用 的 大 小 上 也 是 有 相应 规范 的 。iOS 平台 应 用 的 界面 通常 使 用 12 
AA .14 点 、16 点 和 20 点 这 几 个 大 小 (视网膜 技术 的 屏 瑚 翻 倍 ); 这 些 数值 当然 可 以 作为 我 们 
设置 文字 大 小 的 参考 。 

然而 ,针对 文字 的 大 小 设置 ,我 们 还 有 一 些 经 验 与 大 家 分 至: 中 不 要 为 了 突出 而 一 味 地 
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放大 文字 ,除了 主 标题 外 , 较 大 的 文字 视觉 上 会 显得 比较 粗糙 和 笨重 ,相反 ,精致 秀气 的 小 字 
更 容易 引起 用 户 的 阅读 兴趣 和 研读 欲望 ; @ 如 果 一 定 要 放大 文字 ,最 好 把 它 与 相对 细小 的 
文字 并 列 搭配 ,形成 视觉 上 的 大 小 对 比 。 这 样 的 对 比 效 果 会 使 界面 显得 更 加 的 丰富 且 充 实 
CLRI 8-40); 在 同一 界面 上 ,尽量 使 文学 的 大 小 区 分 开 , 比 如 标题 ,内 容 和 标注 等 ,不 要 所 
有 的 文字 都 使 用 相同 的 大 小 ,这 样 反 而 会 使 界面 失去 调理 而 显得 十 分 混乱 。 








AN Pod F 14:35 | mm 
Activities oday < 播放 列表 ”90 年 代 音 乐 ”播放 中 > 
Wed Aug 08, 2012 Get Back 
. The Beatles 
| 2.84 miles 》 





te. 


Let It Be 


Aug 11, 2012 The Beatles 


| $ 6.01 miles > Pay No Mind (Snoozer) 
| Beck | 
Fri 


: z Isobel 
| » 2.71 miles > BiSftk 


Sep 14, 2012 Girl Singing In The Wreck... 


Black Box Recorder 


* 3.01 miles 》 


Change 


Blind Melon 





«€ 5.00 miles > Picture Of You 
The Cure 


Longview 


Green Day 
N :* 7? 
1 ~ 
L DoELE.! 


(a) RunKeeper (b) 音乐 





图 8-40 10SoE & Bj"RunKeeper" fll 10S 7 上 的 “音乐 2 应 用 


关于 文字 的 字 距 和 行距 ,可 以 放 在 一 起 分 析 ,虽然 这 两 项 数值 我 们 一 般 不 会 在 程序 里 加 
以 调整 而 使 用 系统 默认 的 搭配 ,但 是 在 这 里 必须 对 它们 进行 分 析 ,因为 这 是 文字 元 素 的 视觉 
印象 里 非常 重要 的 细节 。 其 实 , 稍 加 观察 就 可 以 得 出 这 样 一 个 规律 , 那 就 是 “小 字 距 ,大 行 
EE”. HAFA? 原因 很 简单 , 字 间 距 比较 近 会 使 阅读 更 加 流畅 ,而 较 宽 的 行距 使 得 读者 在 换 
行 的 时 候 更 加 清晰 准确 ,不 会 看 错 行 。 当 然 ,更 重要 的 原因 是 使 界面 结构 看 上 去 更 条 理 和 美 
观 ( 参 考 图 8-41 的 帮助 文本 ) 。 

以 上 是 对 文字 处 理 细节 上 的 经 验 和 建议 ,相信 会 给 读者 在 应 用 界面 文字 的 把 握 上 提供 
启发 和 帮助 。 那 么 在 文字 本 身 处 理 得 当 的 同时 ,文字 群 与 界面 的 关系 也 不 能 忽视 ,甚至 更 加 
重要 。 
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== DIRECTV Home 


Currently Watching ® Guide Favorites — 4. Live TV Streaming 


" - 
" d E" 


1100 CINEMA 


Tailor your viewing experience 
Decode! -4 with customizable modules, by 
setting your 


vorite channels 


u 


Lo. FAMiLYROOM Remote Playlist Guide Sports 


图 8-41 iiOS 平 台 的 “DirecTV2?” 





8.4.3 把 握 字 群 的 位 置 关 系 


文字 通常 吓 不 会 狐 立 地 出 现在 界面 上 的 ,它们 往往 是 导航 栏 里 的 标题 ,列表 里 的 项 目 名 
称 .图 标的 注释 或 是 图 片 说 明 等 。 那 么 无 论 出 现在 任何 位 置 上 ,都 要 细心 地 把 文字 恰到好处 
地 放置 在 相应 的 空间 里 ,处 理 好 文字 与 这 些 界 面 元 素 的 空间 和 位 置 关系 。 

通过 对 图 8-42 中 “instagram” 应 用 界面 的 测量 和 比较 ,可 以 感受 到 设计 师 对 处 理 文字 空 
间 位 置 的 严谨 和 规范 。 无 论 是 单个 的 词语 .单行 的 文字 标题 还 是 成 段 的 文字 , 痢 应 该 注意 在 
它 的 四 周 留 有 是 够 的 空间 和 颖 际 ,二 万 不 要 使 文字 和 图 形 的 边 绿 挨 在 一 起 或 离 得 太 近 ,这 样 
会 在 视觉 上 使 人 感到 很 拥堵 和 北 癌 ,一 定 要 让 所 有 的 元 系 之 间 留 有 空间 或 空 际 , 以 保持 “ 空 
气 ” 的 畅通 。 同 时 ,要 注意 文字 的 上 下 和 左右 的 徘 齐 ,这 是 最 基本 的 规范 。 
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< REGISTER 
iaername 


挛 一 一 一 一 一 局 


图 8-42 10S ^E & E Bj instagram" 


8.5 界面 的 个 性 化 风格 


界面 上 的 图 形 元 系 、 色 彩 搭 配 和 文字 设置 痢 是 个 性 化 设计 中 的 局 部 和 细 市 问题 ,要 真正 
把 握 好 应 用 界面 视觉 上 的 个 性 化 ,最 关键 的 还 是 掌握 好 应 用 设计 的 整体 风格 。 细 节 是 服务 
于 风格 的 ,而 风格 才 是 真正 使 应 用 界面 充满 视 沉 魅力 的 因 系 。 我 们 反复 提 到 的 拟 物 化 和 局 
平 化 的 界面 处 理 方法 部 属于 比较 主流 的 设计 风格 。 本 市 为 大 家 介绍 几 种 移动 应 用 常见 的 个 
性 化 风格 和 处 理 方式 。 


8.5.1 手绘 体 风格 


逼真 的 拟 物 化 风格 和 局 平 化 设计 风格 ,是 两 个 相互 对 立 并 有 些 极端 的 设计 风格 。 当 然 ， 
隐喻 这 个 概念 本 号 可 以 应 用 到 任何 风格 里 去 ,包括 局 平 化 风格 的 图 标 。 那 么 , 除 此 之 外 ,我 
们 还 可 以 有 很 多 的 创新 风格 和 个 性 化 处 理 方法 ,手绘 体 ?就 是 一 种 很 受 欢 迎 的 个 性 化 处 理 
风格 。 

所 谓 “ 手 绘 体 ? 就 是 以 手工 绘图 .速写 或 手写 文字 为 元 素 的 设计 风格 。 从 图 8-43 可 以 体 
会 到 “手绘 体 ” 的 特点 : 放松 、 随意、 浪 误 、 幽 默 。 如 今 不 仅仅 是 手工 制作 ,老式 打字 机 和 油墨 
印刷 的 视觉 效果 也 加 入 了 进来 ,为 这 种 随 性 、 浪 漫 的 风格 加 入 了 历史 和 古朴 的 色彩 。 
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图 8-43 iOS 平台 上 的 “手绘 体 ” 风 格 应 用 


8.5.2 卡通 风格 


顾名思义 ,采用 各 种 卡通 、 游 戏 或 儿童 画 的 元 素 搭 建 应 用 界面 。 这 种 风格 不 仅仅 适用 于 
游戏 的 界面 设计 ,很 多 市 有 趣味 性 或 功能 性 的 应 用 也 会 采用 这 种 风格 ,营造 贴近 生活 或 倍 单 
易 用 的 氛围 ( 见 图 8-44) 。 


Q scone back tonyguensee u— 


beijingshan 








uick game - 7 - : 
9 : rain and drizzle this morning 


marathon 


flood panic 


back 





(a) Word Crasher (b) Swackett 


图 8-44 iiOS 平 台 的 “Word Crasher” Ñ 3k 4l Swackett" y FH 
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设计 卡通 风格 的 应 用 界面 通 笛 要 求 色彩 鲜明 且 纯 度 较 高 ,以 加 强 视 觉 冲 击 力 , 让 用 户 
在 打开 界面 的 同时 眼前 一 之 ,以 这 种 视觉 刺激 的 方式 给 用 户 留 下 印象 。 同 时 还 要 求 字体 粗 
大 ,在 图 形 上 尽 可 能 多 地 添加 圆 角 和 光泽 ,但 是 不 要 过 多 地 添加 纹理 以 减弱 色彩 的 沈 度 和 
纯度 。 


8.5.3 简约 风格 

这 个 风格 也 可 以 算是 扁平 化 设计 风格 的 一 种 ,之 所 以 在 这 里 单独 提出 来 讲解 ,是 因为 从 
设计 理念 上 来 说 它 确 实 非常 的 独特 而 且 极端 。 独 特 是 指 在 视觉 上 比 任何 一 种 设计 风格 都 要 
显得 干净 .纯粹 和 大 气 ,而 它 的 极端 在 于 拒绝 一 切 修 饰 一切 效果 和 一 切 附加 的 功能 或 参考 ， 
使 用 户 无 需 选 择 和 思考 , 直 奔 主题 完成 任务 ( 见 图 8-45). 





(a) Solar (b) Daily Insist (c) Haze 天 气 预 报 


图 8-45 iSO 平台 的 “Solar”“Daily Insist” Fi“ Haze 天 气 预 报 ” 


简约 风格 多 见于 效率 型 应 用 的 界面 设计 ,一 般 针 对 功能 比较 单一 或 直接 的 移动 应 用 。 
虽然 无 须 添加 任何 的 图 形 .装饰 和 效果 ,但 是 对 界面 布局 .画面 构图 和 文字 字体 ` 大 小 的 把 握 
要 求 极 高 ,成熟 的 设计 师 都 能 体会 到 , 越 是 简约 的 设计 越 需 要 投入 更 多 的 精力 去 反复 的 推 茂 
和 选择 搭配 。 

应 用 设计 的 视觉 风格 很 多 ,还 有 水 黑 效 果 、 拼 贴 风格 等 等 我 们 无 需 一 一 列举 ,值得 注意 
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的 是 ,无论 使 用 什么 样 的 风格 对 应 用 界面 进行 包 厂 设计 ,一 定 要 保持 风格 的 一 致 。 也 就 是 
说 ,不 能 够 上 一 个 界面 使 用 了 通 真 的 拟 物化 手法 ,下 一 个 页 面 又 使 用 局 平 化 风格 ,或 者 是 在 
精确 严谨 的 界面 格调 中 突然 出 现 很 多 手绘 元 素 , 这 样 做 的 结 采 大 家 可 想 而 知 , 肯 定 是 不 伦 不 
类 。 那 么 除了 界面 上 个 性 化 设计 和 包装 外 , 妃 一 个 因素 更 是 对 应 用 的 视 和 党 印象 起 到 决定 性 
的 作用 ,这 就 是 我 们 接 下 来 要 者 重 讨 论 的 话题 ; 应 用 的 图 标 设计 。 























图 标 设计 与 局 动画 面 


图 标 设 计 是 整个 移动 应 用 设计 过 程 中 真正 的 画龙点睛 。 不 过 在 我 个 人 看 来 ,这 也 是 对 
设计 师 考 验 最 大 的 一 关 。 因 为 一 提 到 图 标 设计 ,我们 怠 会 联想 到 标致 或 徽章 设计 ,这 可 是 平 
面 设计 里 难度 最 大 的 一 门 学 问 。 当 然 , 图 标 设计 和 标志 设计 还 是 区 别 很 大 的 ,一 个 是 讲究 下 
观 和 隐喻 ,一 个 是 追求 象征 和 抽 和 象 ,但 是 它们 的 可 识别 性 和 符号 化 的 特点 ,以 及 对 设计 师 图 
形 造型 能 力 的 高 标准 要 求 是 相同 的 。 

成 功 地 设计 出 拥有 完美 的 视觉 印象 的 图 标 , 并 不 是 件 站 不 可 及 的 事情 。 我 们 通过 丰 官 
多 样 的 设计 思路 、 严 刘 的 设计 理念 以 及 完善 的 设计 流程 ,依托 10S 平台 的 设计 规范 和 图 形 
特征 ,是 完全 可 以 为 你 的 应 用 设计 出 精彩 的 图 标的 。 下 面 ,就 从 最 基本 的 图 标 设计 原则 开始 
图 标 设 计 之 旅 。 


9.1 图 标 设 计 的 原则 


图 标 设 计 一 般 包括 两 大 类 :“ 应 用 图 标 ” 和 “ 栏 图 标 ”, 分 别 如 图 9-1 和 9-2 所 示 。 

“应 用 图 标 ” 也 称 为 局 动 图 标 或 果 面 图 标 , 顾 名 思 义 ,就 是 存放 在 应 用 平台 主页 面 上 , 通 
过 单 击 能 够 打开 并 进入 应 用 程序 的 图 标 设计 。 它 就 像 应 用 程序 的 名 所 ,是 我 们 接触 一 个 应 
用 的 第 一 印象 。 无 论 是 在 移动 设备 的 主页 上 还 是 在 应 用 商店 的 列表 里 ,应 用 图 标 都 会 与 无 
数 的 其 他 应 用 程序 放 在 一 起 , 争 奇 斗 殉 。 因 此 ,设计 一 个 精美 绚丽 、 充 满 视 觉 冲 击 力 的 应 用 
图 标 是 非常 重要 的 。 

“ 栏 图 标 ” 包 含 了 进入 应 用 程序 之 后 的 所 有 图 标 样 式 , 包 括 操作 栏 、 通 知 栏 、 导 航 栏 以 及 
表示 图 项 目 上 的 各 种 目 定 义 图 标 。 每 一 个 栏 图 标 都 有 一 个 非 稼 直观 而 明确 的 含义 ,大 部 分 
是 由 单 色 表现 的 ,但 是 根据 界面 的 视觉 需要 ,有 时 也 会 是 彩色 的 。 和 干 万 别 忽 视界 面 上 这 些 细 
小 的 零件 ,它们 可 是 提升 应 用 视 党 档次 的 利 套 。 

虽然 应 用 图 标 和 栏 图 标 用 处 不 同 , 且 在 表现 方式 上 有 所 区 别 ,但 是 在 设计 过 程 中 都 要 胆 
循 网 标 设计 的 几 个 基本 的 原则 。 这 些 原则 是 保障 图 标的 设计 能 够 适应 应 用 的 市 场 范 争 以 及 
功能 需求 的 重要 依据 。 下 面 来 看 看 在 图 标 设计 中 需要 注意 哪些 基本 的 原则 。 
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(a) iOS 7 应 用 图 标 样 式 





(b) iOS 6 应 用 图 标 样式 


图 9-1 iOS 平 台 的 应 用 图 标 样式 


"it^ 


QO:30 © 








(a) "Ig" EIOS 6 中 的 标签 栏 图 标 


(b) “HEER EIOS 7 中 的 标签 栏 图 标 
图 9-2 “时 钟 ”应 用 中 的 iOS 标签 栏 图 标 
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9.1.1 “识别 性 ”原则 


说 到 “识别 性 ” ,我 们 可 能 会 想到 文字 ,因为 文字 是 最 具有 识别 性 特征 的 事物 ,每 个 文字 
都 是 独一无二 无 可 符 代 的 ,同时 每 个 文字 都 代表 痢 完 全 不 同 的 含义 和 意义 ,我 们 通过 识别 
文字 来 理解 事物 、 判 断 事物 、 达 到 日 标 或 者 得 到 帮助 。 图 标 从 某 种 意义 上 来 说 能 起 到 文学 的 
作用 ,或 者 说 是 文字 的 引申 ,但 是 图 标 比 文字 直观 ,也 比 文字 美观 和 丰富 ,只 是 表达 上 没有 文 
字 准 确 。 在 生活 中 同样 可 以 通过 图 标 来 理解 和 判断 事物 ,通过 图 标 我 们 可 以 在 公路 上 顺利 
地 找到 出 口 .服务 区 和 保 车 场 ; 可 以 在 公共 场合 不 会 进 错 卫 生 间 ; 可 以 在 纷乱 吐 杂 的 商场 
里 迅速 判断 出 口 `. 电 梯 间 和 洗手 间 的 方 癌 或 位 置 。 

因此 ,图 标 不 同 于 一 般 的 图 形 , 它 要 求 具备 强烈 的 视觉 上 的 识别 性 ,图 标 最 重要 的 作用 
束 在 于 让 人 们 识别 。 所 以 图 标 设 计 中 ,形式 美 并 不 是 关键 的 ,能 不 能 准确 地 被 识别 一 定 是 设 
计 师 的 第 一 目标 。 好 的 图 标 设计 ,要 么 能 够 使 相对 应 的 功能 一 目 了 然 ,要 么 能 够 表达 出 明确 
的 内 涵 ,或 者 符合 大 众 一 贯 的 经 验 判 断 , 总 之 是 要 使 用 户 能 够 迅速 判断 出 它 的 含义 。 






































(a) 查找 我 的 朋友 (b) 邮件 
图 9-3 IOS 平台 “查找 我 的 朋友 ”应 用 图 标 和 10S 7“ 邮 件 ? 应 用 的 工具 栏 图 标 


通过 图 9-3 可 以 体会 到 图 标 设计 识别 性 原则 的 体现 ,查找 我 的 朋友 ”的 应 用 图 标 通 过 
韭 第 下 观 的 隐喻 手法 ,使 用 户 非 第 目 然 地 把 应 用 归 类 在 交友 工具 里 。i0S 7 的 “邮件 ”应 用 使 
用 了 平台 标准 的 栏 图 标 , 虽 然 没 有 在 图 标 下 面 进行 文字 注释 ,但 是 我 们 可 以 一 日 了 然 地 判断 
出 “标记 ”“ 分 类 ”“ 删 除 “ 回 复 ” 和 “撰写 ”五 个 功能 。 其 中 垃圾 桶 的 图 形 就 是 利用 了 大 众 对 
它 的 一 贯 印象 ,合理 地 隐喻 7 了 “删除 ”这 一 内 涵 。 因 此 ,在 考虑 图 标 造 型 的 时 候 , 首 先 要 把 舍 
义 表 达 清 楚 。 如 宁 图 形容 易 引 起 下 义 , 即 便 设 计 的 视觉 再 突出 、 细 节 再 精美 , 那 也 是 差 之 坚 
E, ZATE, 


9.1.2 图 标 设 计 的 一致 性 ”原则 


一 致 性 原则 主要 是 针对 图 标的 设计 风格 来 说 的 ,需要 从 以 下 三 个 方面 来 阐述 ， 

(1) 同一 款 应 用 在 不 同 平台 上 的 图 标 要 一 致 。 由 于 三 大 平台 在 图 标 设计 的 风格 和 规范 
上 有 明显 的 区 别 ,造成 我 们 的 应 用 在 平台 移植 的 时 候 不 能 简单 地 使 用 完全 相同 的 图 标 。 这 
时 ,设计 师 需要 针对 不 同 的 应 用 平台 设计 规范 对 图 标 进行 修改 ,我 们 要 在 符合 平台 特点 的 基 
础 上 使 图 标 尽 可 能 一 致 
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(9) O E 


iOS Android Windows phone iOS Android windows phone 
(a) skype (b) UCHI Vi As 


图 9-4 “skype” JH Kler RI" UC WI V di D H ES 


通过 图 9-4 中 的 “skype” 应 用 图 标 可 以 看 到 同一 款 应 用 图 标 在 不 同 应 用 平台 上 的 一 致 
性 原则 。 而 “UC 浏览 器 ”应 用 图 标的 设计 在 相当 长 的 一 段 时 间 里 没有 遵守 这 一 原则 ,虽然 
TE IOS 和 Android 平 台 上 的 风格 一 致 ,然而 在 windows phone 平 台 上 却 过 于 追求 平台 特有 
的 扁平 化 设计 风格 ,与 之 前 的 设计 大 相 径 庭 , 使 用 户 很 容易 费解 ,也 许 会 把 它 当 成 山 
寨 品 。 

(2) 在 同一 平台 的 不 同 图 标 之 间 的 风格 或 规范 要 一 致 。 前 面 提 到 ,每 一 应 用 平台 都 有 
自己 一 套 完整 的 设计 风格 和 规范 要 求 , 在 图 标 设 计 上 更 是 这 样 。 因 此 在 进行 图 标 设计 的 时 
候 一 定 要 深入 了 解 每 个 应 用 平台 的 图 标 规范 和 视觉 风格 。 这 里 可 以 先 通 过 图 9-5 来 比较 一 
下 iOS 平 台 传 统 的 拟 物 化 图 标 设计 的 视觉 风格 和 10S 7 扁平 化 设计 的 图 形 规范 ,体会 它们 
之 间 在 设计 理念 上 的 差异 以 及 各 自 对 统一 性 原则 的 遵守 。 

通过 图 9-6 P iOS 6 和 10S7 中 不 同 标签 栏 图 标的 设计 ,可 以 看 到 ,iOS7 的 栏 图 标 与 字 
体 一 样 , 都 在 视觉 上 趋 于 纤细 和 清秀 。 同 时 我 们 也 可 以 体会 到 在 相同 平台 进行 图 标 设 计时 
应 遵循 的 一 致 性 原则 。 

(3) 同一 应 用 中 栏 图 标的 风格 、 细 节 和 规格 要 一 致 。 不 要 小 看 表面 上 微不足道 的 栏 图 
标 , 这 些小 零件 实际 上 是 移动 应 用 界面 设计 画龙点睛 的 重要 一 笔 。 而 能 不 能 把 界面 设计 得 
既 完 美 又 统一 ,关键 就 在 于 是 否 能 把 握 好 栏 图 标的 图 形 一 致 性 原则 。 这 一 点 ,对 设计 师 的 造 
型 能 力 的 考验 尤为 突出 。 

通过 图 9-7 可 以 明显 体会 到 同一 款 应 用 内 部 不 同 的 自 定 义 栏 图 标 在 设计 过 程 中 所 遵循 
的 一 致 性 原则 。 虽 然 每 个 图 标 各 不 相同 ,但 是 它们 的 大 体 风 格 .规格 尺寸 以 及 边缘 和 细节 处 
理 都 是 完全 一 致 的 ,使 整个 界面 看 起 来 既 丰 富 又 整体 。 

当然 ,图标 设计 的 一 致 性 原则 并 不 仅仅 表现 在 上 述 的 三 个 方面 ,这 只 是 比较 重要 和 必须 
遵守 的 几 个 方面 。 有 时 我 们 还 会 在 设计 过 程 中 遇 到 一 些 特殊 情况 也 应 该 遵循 一 致 性 原则 ， 
比如 为 系列 应 用 设计 图 标 时 ,或 者 为 针对 相同 用 户 群 体 的 应 用 产品 设计 图 标 时 等 。 
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图 9-7 10S Æ & I Flick Pics”, Android Æ £& B * Circle" fll Windows Phone 平台 的 “Mail. Ru" 


9.1.3 ”图标 设计 的 “兼容 性 ”原则 


为 移动 设备 的 应 用 程序 设计 图 标 , 必 须 考虑 移动 设备 区 别 于 其 他 设备 的 独特 性 ,包括 屏 
幕 的 尺寸 .像素 的 多 少 以 及 界面 的 风格 。 同 时 ,还 要 考虑 在 不 同 的 环境 、 模 式 和 情境 下 使 用 
这 些 图 标 , 这 就 是 所 要 求 的 图 标 设 计 的 兼容 性 。 

很 多 有 能 力 的 设计 师 总 是 把 图 标 制 作 得 复杂 又 细腻 ,希望 通过 精美 绝伦 的 图 标 吸引 用 
户 的 眼球 以 提升 应 用 的 档次 和 格调 。 但 是 当 我 们 把 精心 设计 的 图 标 放置 在 移动 界面 狭小 的 
屏幕 上 观察 时 , 却 发 现 效果 平淡 ,细节 尽 失 , 甚 至 有 时 候 让 人 感到 模糊 不 清 。 因 此 成 熟 的 设 
计 师 会 在 设计 图 标的 时 候 尽 可 能 地 从 简约 图 形 入 手 , 反 复 测试 ,使 自己 的 作品 在 不 同 的 大 
小 、 不 同 的 环境 下 都 能 够 床 显 出 夺目 的 视觉 体验 。 那 么 应 该 从 哪些 环 市 上 注意 图 标的 兼容 
性 呢 ? 
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首先 是 尺寸 和 像素 的 大 小 。 我 们 以 苹果 产品 iPhone 为 例 , 虽 然 在 一 般 情况 下 iPhone 
果 面 上 的 应 用 图 标的 规格 大 小 是 114X114 像素 ,也 就 是 9 毫米 见方 的 大 小 。 但 是 在 一 些 特 
殊 情 况 下 我 们 设计 出 来 的 图 标 会 以 比较 大 或 者 非常 小 的 尺寸 来 显示 ( 见 图 9-8)。 所 以 在 设 
计时 就 要 尽 可 能 地 把 放大 和 缩小 之 后 的 效果 考虑 进去 。 
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(a) iPhone 5 [fr] (b) iPhone 系统 设置 (c) App Store 的 应 用 简介 


图 9-8 iOS 的 应 用 图 标 在 iPhone & M_E iPhone 系统 设置 里 和 App Store 的 应 用 简介 里 





从 图 9-8 可 以 看 到 ,虽然 我 们 头脑 概念 中 的 应 用 图 标 都 是 在 移动 设备 等 面 上 显示 的 ,但 
是 在 一 些 诸如 系统 设置 ,应 用 的 扩展 链接 或 者 应 用 商店 里 都 会 以 不 同 的 大 小 或 方式 来 显示 
应 用 图 标 。iPhone 的 系统 设置 中 图 标 显 示 为 29X29 点 (视网膜 屏幕 下 为 58X58 RR) E 
怠 是 4 训 米 见方 的 大 小 。 而 App Store 的 应 用 简介 里 的 图 标 达 到 了 175X175 像素 ,50 Æ% 
见方 。 因 此 在 设计 ioOS 平台 的 应 用 图 标 时 一 定 要 在 这 两 个 太 才 中 进行 视 沉 比较 和 兼容 性 


测试 。 
Cy "a 


(a) AppAdvice (b) WorldCard (c) Urbanspoon 








9-9 iOS ¥§ By" AppAdvice","WorldCard" fll" Urbanspoon" Jw JH BIER 





在 图 9-9 中 列 出 了 三 蒜 105 应 用 的 测试 结 采 ,“AppAdvice” 比 较 成 功 ,无 论 在 任何 尺寸 
下 都 能 够 清晰 、 准 确 地 表现 出 整体 创意 和 图 像 细节 。“WorldCard 的 应 用 图 标 虽 然 制 作 的 
细节 丰富 且 精 细 , 但 是 由 于 画面 缺乏 整体 感 , 且 缺乏 视 党 主体 ,造成 图 标 缩小 后 不 但 视 党 含 
混 而 且 细 市 尽 失 “Urbanspoon 应 用 图 标的 问题 也 非 篆 普 笛 ,虽然 在 图 标 上 使 用 文字 非常 
有 利于 市 场 推广 ,但 是 如 果 文 字 过 多 ,反而 无 法 看 清和 识别 ,尤其 是 缩小 之 后 会 显得 非常 模 
糊 和 粗粮 。 

为 外 ,还 要 考虑 图 标的 使 用 环境 。 这 里 主要 讨论 在 不 同 的 底 色 和 背景 下 显示 图 标的 视 
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党 效 末 , 因 为 应 用 平台 的 色彩 主题 可 以 随意 地 更 换 , 园 面 的 背景 图 案 也 可 以 随意 挑选 ,各 个 
应 用 商店 的 色彩 背景 也 各 不 相同 。 这 个 情况 下 ,并 不 是 把 图 标的 色彩 设计 得 越 人 鲜艳 、 细 节制 
MEITE E ,就 越 能 吸引 了 眼球。 一 般 来 说 ,色彩 明 瞳 对 比较 强 的 图 标 ,能 够 适应 各 种 不 同 的 
背景 环境 ,无 论 在 多 么 复杂 的 背景 下 ,都 能 够 凸显 出 明确 的 视觉 效果 。 而 明暗 对 比比 较 昼 的 
图 标 则 容易 被 环境 颜色 所 影响 而 变 得 难以 识别 或 无 法 清晰 的 显示 。 

















(a) Find My Headset (b) FIT 便 签 


图 9-10 "Find MyHeadset” 应 用 的 应 用 图 标 和 “FIT 便签 ”应 用 的 应 用 图 标的 羔 容 性 测试 


通过 图 9-10 可 以 明显 地 感 党 到 不 同 明 暗 对 比 的 环境 兼容 性 “Find MyHeadset” 应 用 的 
应 用 图 标 由 于 明暗 对 比 强烈 ,所 以 无 论 在 任何 背景 下 ,甚至 在 与 它 色 调 相 同 的 背景 下 ,都 能 
够 被 清晰 地 识别 出 来 。 而 “FIT 便签 ”应 用 的 应 用 图 标 虽 然 细 节 丰 富 、 制 作 精 细 , 但 是 由 于 色 
彩 明暗 对 比比 较 弱 ,所 以 在 浅 色 痛 景 、 同 色调 背景 和 多 色调 背景 上 都 不 是 很 清晰 、 明 确 。 

兼容 性 原则 还 有 一 个 方面 , 那 就 是 能 否 适应 黑白 使 用 或 单 色 调 使 用 。 虽 然 应 用 图 标 几 
平 没 有 可 能 会 在 单 色 或 黑 日 模式 下 使 用 ,但 是 应 用 内 部 的 栏 图 标 在 很 多 情况 下 都 要 在 黑 日 
或 单 色 情况 下 显示 ,因为 五 颜 六 色 的 栏 图 标 会 把 界面 搞 得 凌乱 不 堪 。 因 此 在 设计 此 类 图 标 
的 过 程 中 ,我 们 一 定 要 充分 考虑 到 在 彩色 状态 下 、 双色 状态 下 以 及 单 色 状态 下 显示 出 来 会 不 
会 有 明显 的 差别 ,之 后 再 尽量 减 小 或 弱化 差别 ,最 终 使 用 户 在 任何 模式 下 都 不 会 对 它 产 生 
歧义 。 


























„honey, I gotit honey,lgoth Z, honey, i gotit 
"" Scheduled — '" Scheduled ^ '"" Scheduled pre prem aman 
-— Ingredients Guide Ingredients Guide Ingredients Guide 
(a) Things (b) Get Reimbursed 


图 9-11 iOS 平台 的 “Things” 栏 图 标 和 “Get Reimbursed” 栏 图 标的 兼容 性 测试 
在 图 9-11 中 可 以 看 到 ，Things ”应 用 的 目 定义 栏 图 标 无 论 在 彩色 . 单 色 还 是 灰 度 模式 


下 都 非常 的 清晰 、 明 确 且 不 会 产生 视觉 误差 。 而 “Get Reimbursed” 应 用 的 自 定 义 栏 图 标的 
效果 就 不 太 理 想 , 由 于 图 标的 图 形 化 不 强 , 加 上 色调 不 统一 ,造成 在 不 同 的 色彩 模式 下 无 法 
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通过 这 两 个 案例 ,我 们 也 更 加 理解 了 对 图 标 在 各 种 环境 下 进行 兼容 性 和 可 用 性 的 测试 
是 非常 重要 的 。 同 时 ,能 否 遵 循 以 上 所 提 到 的 图 标 设 计 这 些 基 本 原则 ,是 保障 大 家 的 应 用 作 
癌 在 图 标 设计 这 个 关键 环节 不 出 问题 的 关键 。 但 是 ,能 不 能 设计 出 吸引 眼球 、 视 觉 突 出 、 意 
义 深 远 的 图 标 , 仅 仅 靠 遵守 原则 是 无 法 达到 的 。 接 下 来 ,将 继续 深入 地 探讨 如 何 循序 渐进 地 
打造 出 完美 的 移动 应 用 图 标 。 


9.2 iOS 应 用 图 标 设 计 


一 次 约会 ,我 们 肯定 会 把 目 己 打扮 一 番 , 最 起 码 也 得 干 闪 整洁。 原因 很 侧 单 ,为 的 是 
T 8 PAXFEDAR «rf pz HIS p ce RB hz FH 26 HL E PRU SS ED AR. REED ZR nf ERK 
吸引 过 来 ,从 而 展现 你 的 功能 ,发 挥 你 的 魅力 ,进一步 局 得 大 家 的 信任 。 而 如 采 第 一 印象 平 
淡 或 者 无 法 给 人 留 下 印象 ,虽然 不 会 让 你 的 应 用 立刻 被 删 掉 ,但 是 大 家 从 心理 上 已 经 不 会 对 
使 用 你 的 应 用 报 以 很 高 的 热情 。 如 果 第 一 印象 很 差 MARRE P OBU S APA A 
有 。 所 以 ,设计 好 应 用 图 标的 重要 性 不 言 而 喻 ,我 们 设计 应 用 图 标的 目标 就 是 要 建立 完美 的 

一 印象 。 


9.2.1 建立 完美 的 第 一 印象 


对 于 移动 应 用 设计 来 说 ,用 户 第 一 眼看 到 的 就 是 应 用 的 应 用 图 标 。 当 打开 移动 应 用 商 
店 ,上映 入 眼帘 的 是 成 千 上 万 的 应 用 摆 放 在 列表 里 ,包括 了 应 用 的 图 标 、 名 称 以 及 价格 ,而 页 面 
上 最 次 眼 的 元 系 , 肯 定 是 应 用 的 应 用 图 标 。 它 们 通常 是 成 群 地 出 现 , 所 以 你 的 设计 一 定 要 想 
方 设法 吸引 眼球 ,脱颖而出 。 怎 么 才能 做 到 呢 ? 

1. qi rab 

首先 ,网 是 要 有 一 个 明确 的 视 党 中 心 。 视 党 中 ， Re a 
而 啊 亮 的 主体 ,而 这 个 主体 最 好 位 于 画面 的 中 心 。 这 样 EIS EDU. T IR HR C Do IE E 


KJI. 


(a) Skee-Ball (b) Circle (c) Pulse News 






























































图 9-12 10S Æ & fj" Skee-Ball" “Circle” fl^ Pulse News" 


图 9-12 PB =S Fe br RU. T JE HH ABE Y Febr dt dos rac «EFE p fep T DER 
JJ I I8] 4 7] ,很 容易 给 人 留 下 深刻 的 印象 。 而 图 9-13 中 的 三 个 图 标 就 没有 在 画面 上 确定 视 
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(a) Coin Push Frenzy (b) DCikon ZADW Apex (c) Circle AodiPorsche 
图 9-13 10S 平台 的 “Coin Push Frenzy"*DCikonZ ADW Apex” 和 “Circle Aodi Porsche" 
党 中 心 ,图 标 显 得 松散 无 骨 , 没 有 主体 ,无 法 从 视觉 上 找到 焦点 从 而 给 人 留 下 明确 的 视觉 
印象 。 
视觉 中 心 大 部 分 情况 下 应 处 在 画面 的 中 心 点 ,但 根据 创意 的 需要 或 者 图 形 的 重心 ,位 置 
可 以 有 所 偏离 ,但 是 一 定 要 在 形式 上 确保 它 视觉 上 的 中 心 感 ( 风 图 9-14). 


(a) PPTV (b) 高 清 手 机 电视 (c) Radio Lounge UK 








图 9-14 iOS Æ & R9" PPTV". Android 平台 的 “高 清 手 机 电视 ” 
和 Windows Phone 平 台 的 “Radio Lounge UK" 


2. 造型 简约 

视觉 中 心 确定 之 后 ,下 一 步 就 是 要 确保 它 能 够 吸引 住 眼 球 , 怎 么 吸引 ?一 个 是 要 尽量 使 
用 简约 的 图 形 作为 视觉 中 心 的 造型 ,因为 图 形 越 简 单 就 越 容易 把 视觉 印象 快速 地 固定 下 来 ， 
印 在 脑海 里 ( 见 图 9-15)。 而 复杂 的 图 形 或 图 案 使 视觉 印象 分 敬 旦 不 易 看 懂 , 从 而 无 法 留 下 


深刻 的 视觉 印象 。 


(a) Shazam (b) Vplayer (c) 高 德 地 图 








图 9-15 ”iOS 平台 的 “Shazam”、Android 平台 的 “Vplayer” 和 Windows Phone 平 台 的 “高 德 地 图 ” 


图 9-16 中 的 三 个 图 标 设 计 虽 然 都 有 一 个 比较 明确 的 视觉 主体 ,但 是 由 于 这 个 视觉 主体 
的 图 形 或 内 容 过 于 复杂 或 者 凌乱 ,效果 反而 不 如 图 9-15 的 三 个 图 标 , 无 法 给 人 留 下 深刻 的 
视 党 印象 。 
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(a) The Electric Company Wordball (b) Reuters (c) FE 


图 9-16 i1OS 平 台 的 “The Electric Company Wordball" “Reuters” ftl ^ Æ je" 


3. 色彩 对 比 

为 一 个 吸引 眼球 的 方法 就 是 强烈 的 色彩 对 比 。 关 于 色彩 搭配 的 问题 我 们 在 上 一 革 已 经 
做 了 比较 详细 的 讲解 ,但 是 针对 图 标 设计 ,我 们 还 需要 进一步 阐述 。 要 得 到 突出 或 强烈 的 视 
党 效 末 需要 使 色彩 对 比 强 烈 , 大 家 在 提 到 色彩 对 比 的 时 候 , 惑 介 直 接 会 认为 是 色相 上 的 对 比 
(如 互补 色 或 对 比 色 ) ,但 是 在 我 们 已 经 了 解 了 色彩 的 属性 后 ,对 比 可 以 变 得 更 多 样 化 ,比如 
之 前 ( 见 图 9-10) 提 到 的 色彩 明 瞳 上 的 对 比 , 还 可 以 尝试 色彩 纯度 上 的 对 比 。 


(» 


(a) Flickit (b) Gogobot (c) Mail.Ru 





图 9-17 10S ¥ & Bj Flickit", Android 平台 的 “Gogobot”、 Windows Phone 平台 的 “Mail. Ru" 


图 9-17 中 的 三 个 图 标 主 要 在 色彩 的 色相 上 进行 了 鲜明 的 对 比 处 理 ,iOS 平台 的 
“Flickit” 使 用 了 对 比 色 处 理 , 加 上 黑色 背景 的 反衬 使 网 形 和 色彩 都 非常 的 清晰 。Android 
平台 的 “Gogobot” 虽 然 颜色 较 多 ,但 是 使 用 了 白色 线条 进行 了 分 隔 , 所 以 色彩 之 间 非 常 和 
谐 . 鲜 明 。 而 Windows Phone 平 台 的 “Mail. Ru” 直 接 选 择 了 一 对 补 色 ,使 色彩 的 鲜明 对 比 
达到 了 极致 ,视觉 上 肯定 是 非常 突出 的 ,只 是 有 时 过 于 强烈 的 对 比 容易 使 人 感到 紧张 或 


T Yii o 


(a) Instacast3 (b) Tagesschau (c) The Typography Manual 








9-18 1OS ¥ £l" Instacast3" “Tagesschau” fll" The Typography Manual" 


图 9-18 中 的 三 个 图 标 是 在 确定 了 基础 色调 后 ,在 明暗 度 或 纯度 上 作文 草 , 使 图 标 在 色 
彩 上 形成 鲜明 .强烈 的 对 比 , 从 而 增强 视 党 冲击 力 。 
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4. 细节 精美 

虽然 我 们 一 再 强调 应 用 图 标的 设计 是 要 以 三 大 原则 以 及 整体 的 视觉 冲击 力 为 主 的 ,但 
是 精美 的 细节 也 是 决 不 可 忽视 的 。 一 个 完美 的 图 标 设 计 , 力 至 整个 应 用 的 界面 设计 ,没有 精 
致 的 .能 经 得 起 细心 品味 的 细节 设计 是 绝对 不 行 的 。 相 反 , 即 使 创意 出 拥有 强烈 视觉 效果 的 
图 标 ,但 是 如 果 制 作 粗 糙 ,细节 平 良 ,也 会 使 用 户 心 里 的 满意 度 大 打折 扣 。 那 么 接 下 来 ,根据 
你 的 界面 风格 和 图 形 特点 ,无 论 是 逼真 的 隐喻 效果 ,还 是 简约 的 扁平 化 风格 ,甚至 是 珊 有 三 
维 空间 的 特效 ,让 我 们 充分 地 发 挥 出 目 己 的 想象 力 和 表现 力 , 把 每 一 个 图 形 转 角 起伏 .渐变 
以 及 车 透 效 末 打 造 得 精美 细腻 ,品味 十 足 。 


























(a) Top DJ (b) Wondershare Player (c) SoundHound 


图 9-19 ” 10S 平台 的 “Top DJ". Android 平台 的 “Wondershare Player" 
和 Windows Phone 平台 的 “SoundHound” 


图 9-19 中 的 三 款 应 用 图 标 都 是 设计 优秀 且 做 工 精 良 的 典范 。i1OS 平 台 的 “Top DJ” 采 
用 了 105 传统 的 拟 物 化 风格 ,把 这 个 唱 盘 机 制作 得 可 以 说 是 惟妙惟肖 ,光泽 、 质 感 和 体积 感 
都 把 握 得 精美 细腻 。Android 平台 的 “Wondershare Player” 虽 然 没 有 使 用 隐喻 的 手法 ,但 借 
助 了 拟 物 化 的 细节 人 处理 风格 ,把 一 个 平 几 简单 的 图 标 进行 了 精心 的 修饰 , 精 雕 细 刻 、 抛 光 打 
KS ,使 它 散 发 着 雅 格 丽 材质 的 味道 。Windows Phone 平台 的 “SoundHound” 虽 然 采 用 了 局 
平 化 风格 处 理 图 形 ,但 是 也 可 以 打破 常规 地 添加 一 些 细微 的 阴影 和 纹理 ,使 图 标 产 生 了 空间 
和 体积 感 , 变 得 超凡 脱俗 。 

当然 ,从 上 面 的 实例 里 我 们 也 体会 到 了 软件 技术 对 图 形 处 理 的 重要 性 。 学 习 掌 握 一 个 
软件 (这 里 主要 是 Photoshop) ,不 单单 是 对 它 的 功能 进行 了 解 , 更 重要 的 是 能 不 能 随心 所 和 欲 
地 去 驾驶 和 精心 细致 地 去 推 害 这 些 功 能 ,而 最 重要 的 是 能 否 从 优秀 作品 里 得 到 并 积累 处 
理 细 节 的 经 验 , 并 能 把 这 些 经 验 为 我 所 用 。 如 果 能 够 达到 ,成 为 图 标 设 计 高 手 绝 不 是 
XE S 

本 节 介 绍 的 主要 是 如 何 使 你 的 应 用 图 标 吸引 眼球 ,至 于 构思 和 创意 的 方法 ,会 在 后 文 继 
续 前 述 。 但 是 在 这 之 前 ,必须 对 OS 平台 的 应 用 图 标的 设计 规范 和 制作 规格 有 一 个 全 面 的 
认识 ,否则 我 们 可 能 会 把 应 用 图 标 设计 得 不 伦 不 类 ， 


9.2.2 iOS 平台 应 用 图 标 设计 规范 


iOS 平台 的 应 用 图 标 设 计 的 特点 可 以 说 是 非常 明显 的 ,我 们 在 10S 移动 设备 的 桌面 上 
看 到 的 效果 通 稼 如 图 9-20 所 示 。 
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图 9-20 iiOS 平 台 的 应 用 图 标 


图 标的 轮廓 一 律 采 用 圆 角 矩形 ,大 多 采用 隐喻 的 手法 表达 应 用 的 功能 或 状态 。iOS 6 
的 图 标底 部 市 有 淡淡 的 阴影 ,使 图 标 从 视觉 上 是 深 浮 在 果 面 上 的 ,有 些 图 标 上 市 有 玻璃 光 汉 
的 反射 阴影 ,符合 了 笠 果 系统 传统 的 水 唱 质 感 。iOS 7 的 扁平 化 风格 不 需要 带 有 这 些 特 效 ， 
但 是 在 图 像 设计 的 时 候 应 该 按照 系统 规范 提供 的 网 格 模板 去 设计 (可 参看 图 2-29) ,主要 体 
现在 圆 形 和 和 矩形 的 比例 和 位 置 关系 ,当然 ,设计 本 和 号 是 充满 变化 和 突破 的 ,不 要 一 味 地 亲 循 
网 格 檬 板 而 放弃 目 己 的 创 昔 和 天 才 的 图 像 把 握 能 

然而 ， 我 们 在 绘图 软件 里 制作 图 标的 时 候 , 只 需要 做 成 图 9-21 SCR) png 格式 就 可 以 
了 ,完全 没有 必要 目 己 动手 添加 上 述 的 这 些 效 朱 。 


> 
4, 


(a) LeBallon (b) SaPaint (c) Shaking 














图 9-21 51work6 团队 设计 的 10S SE & HIER: "LeBallon", *SaPaint" fll^ Shaking Sound" 


当 把 设计 、 制 作 完成 的 应 用 上 传 到 OS 平台 ,iOS 系统 会 自动 在 你 的 应 用 图 标 上 添加 圆 
角 和 上 述 的 视觉 效果 以 使 其 保持 和 系统 内 置 图 标的 一 任性 ,使 你 的 应 用 图 标 产 生 图 9-22 的 
2 





图 9-22 iOS 系统 会 自动 在 应 用 图 标 上 添加 的 效果 
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为 了 保持 加 面 视 觉 上 的 整齐 划一 , 圆 角 效果 是 每 个 图 标 必须 添加 的 ,1O0S 6 中 会 添加 阴 
影 ,但 是 玻璃 反射 光 的 效果 是 可 选 的 ,根据 上 自己 图 标的 视觉 需要 决定 是 否 添加 。 而 且 , 切 记 
不 要 在 制作 0S 应 用 图 标的 时 候 使 用 透明 背景 和 Alpha 通道 。 

至 于 图 标的 尺寸 ,可 以 通过 图 9-23 全 面 地 了 解 。 痛 先 , 在 尺寸 上 ,i1OS 7 作 了 调整 , 比 原 
来 略 大 一 些 。 传 统 版 本 iPhone 手机 (包括 iPod touch) 的 桌面 图 标 是 52X52 点 ,视网膜 屏 
幕 为 114X114 像素 ,iPad( 包 括 iPad mini) 的 果 面 图 标 是 70X70 点 ,视网膜 屏幕 为 140 X 
140 142%. M iOS 7 HJ iPhone 手机 (包括 iPod touch) HS œ rat Ub di 60X60 点 ,视网膜 屏幕 
H 120X120 像素 ,iPad( 包 括 iPad mini) B s jfi | p zi 76X76 点 ,视网膜 屏幕 为 152 义 152 
像素 。 但 是 , 当 你 提交 你 的 应 用 时 ,必须 提供 1024X1024 像素 大 小 的 应 用 图 标 以 供 在 App 
Store 中 显示 。 而 且 我 们 不 能 把 现 有 的 小 尺寸 图 标 直 接 放 大 ,这 样 会 丢失 细 市 ,我 们 必须 在 
设计 一 开始 的 时 候 , 就 以 1024X1024 像素 的 尺寸 创建 文件 ,这 样 才 能 保证 在 任何 情况 下 细 
节 清 晰 不 丢失 。 



































iDS 移 动 设备 ios 7 启动 图 标 (像素 )  'O9 Fe (RE) App Store 图 标 (像素 ) 
1 iPhone 5 和 第 五 代 iPod touch 120 x 120 114 x 114 1024 x 1024 
2 iphone 和 ipod touch ( 视网膜 屏幕 ) 120 x 120 114 x 114 1024 x 1024 
3 iPhone 和 iPod touch 60 x 60 57x57 512 x 512 
4 iPad ( 视网膜 屏幕 ) 152 x 152 144 x 144 1024 x 1024 
5 iPad 76 x 76 72x72 512 x 512 


图 9-23 ”iOS 应 用 图 标 规格 


9.2.3 儿 个 简单 的 应 用 图 标的 设计 思路 

(1) 直接 信 鉴 应 用 的 界面 设计 ,包括 材质 、 样 式 和 色调 。 例 如 在 设计 界面 的 时 候 如 果 使 
用 了 隐喻 仿真 的 方式 ,那么 在 设计 应 用 图 标 时 不 妨 把 隐喻 进行 到 旗 ,把 我 们 的 隐喻 对 象 微缩 
在 图 标 里 ,再 经 过 细致 的 调整 。 这 个 思路 的 好 处 是 能 提高 视觉 上 的 整体 协调 和 识别 性 ,大 家 
一 看 到 图 标 ,就 能 够 清楚 里 面 的 内 容 和 功能 。 图 标 设计 比较 忌讳 给 人 神秘 、 难 以 琢 麻 的 感 
沉 , 一 定 要 下来 直 去 ,不 要 让 用 户 狂 测 ,这 样 也 比较 容易 提高 用 户 的 忠诚 度 。 

图 9-24 中 的 三 球 应 用 就 是 适当 地 沿用 了 应 用 界面 的 颜色 、 样 式 以 及 隐喻 对 象 , 使 图 标 
的 设计 工作 变 得 水 到 渠 成 ,人 简单 容易 。 但 是 细 市 一 定 要 推 融 把 握 好 , 千 万 不 要 为 了 图 省 事 而 
章 率 应 对 ,应 用 图 标 是 你 应 用 的 第 一 面孔 ,要 做 的 比 界面 还 要 精致 。 

(2) 针对 应 用 的 功能 特点 ,设计 一 个 指示 牌 一 样 的 图 形 ,来 告诉 用 户 你 应 用 的 功能 是 什 
么 ,或 者 能 说 明 功 能 的 长 处 或 特点 。 这 种 方法 的 关键 在 于 要 一 针 见 血 地 把 你 要 表达 的 事情 
说 清楚 ,又 要 保持 图 像 的 美观 和 个 性 。 这 种 方法 的 优点 是 同时 起 到 了 解释 次 明和 广告 宣传 
的 作用 ,而且 比较 的 和 直观。 但 是 很 容易 和 同类 的 应 用 产生 相同 的 创意 ,比如 我 们 看 到 应 用 商 
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(a) Nota (b) QIP Speed Test (c) Bluetooth Tile 


图 9-24 10S ¥ & Bj" Nota" , Android 平台 的 “QIP Speed Test" fll Windows Phone ?É £& Bj Bluetooth Tile" 


店 里 所 有 摄影 类 的 应 用 几乎 千篇一律 地 使 用 相机 镜头 的 图 像 , 大 量 的 音乐 播放 应 用 都 使 用 
耳机 的 图 形 作为 应 用 图 标 。 所 以 ,我 们 要 尽量 在 表明 功能 含义 的 同时 不 要 和 其 他 应 用 雷 质 


(T 











(a) Lose it (b) AppLock (c) gMaps 


图 9-25 10S 2E & Bj "Lose it", Android 平台 的 “AppLock” 和 Windows Phone ^F £& HJ gMaps" 


图 9-25 HP BY — ax HR hz Hd ES E Js f HH d os R2 A IADR A Bf AI jp ER D HÀ 
的 功能 ,通过 图 标 , 我 们 也 能 很 清楚 地 了 人 解 应 用 的 类 —— 

(3) 针对 功能 比较 抽象 的 一 类 应 用 , 信 助 上 一 个 思路 模式 , 仪 仅 通过 一 个 图 形 或 者 符号 
很 难说 清 应 用 的 功能 特点 。 这 个 时 候 ， RODEO BEA IUD INS MDC AU 
特点 ,设计 一 个 带 有 标志 性 的 视觉 形象 、 品 牌 符 号 或 者 吉 和 实物。 就 像 我 们 熟知 的 twitter 图 
标 上 的 蓝 色 小 马 一 样 ,在 意象 上 给 你 的 应 用 附加 上 一 个 品牌 文化 。 这 种 方式 的 优点 古 创意 
性 强 .个 性 人 鲜明 很 容易 在 众多 的 应 用 图 标 中 脱 刹 而 出 。 
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( 9' 


(a) Hello Cupcake (b) Go s rfj EH (c) Face Lens 





图 9-26 ”1OS 平 台 的 “Hello Cupcake", Android 平台 的 
“Go $ mf EW” H Windows Phone 平台 的 “Face Lens" 


图 9-26 中 的 三 款 应 用 的 应 用 图 标 采 用 了 创建 标志 性 的 视觉 形象 的 方法 。“ Hello 
Cupcake” 是 一 款 学 习 面 点 制作 步骤 的 应 用 ,利用 一 个 鸭子 造型 的 蛋糕 达到 了 树立 行业 形象 
的 作用 。Android 平台 的 “Go 桌面 主题 "通过 一 株 精 美的 小 植物 ,给 用 户 留 下 深刻 的 品牌 印 
$$, Windows Phone 平台 的 “Face Lens? 是 在 照片 头像 上 添加 面具 .眼镜 和 头饰 的 小 游戏 ， 
通过 一 个 猴子 的 形象 ,概括 了 各 种 的 面具 和 鬼脸 ,也 给 应 用 打造 了 一 个 滑稽 的 外 观 形象 。 

很 多 成 功 的 移动 应 用 不 但 被 广大 用 户 所 熟知 ,而 且 通 过 不 断 的 发 展 和 更 新 已 经 成 为 知 
名 的 应 用 品牌 。 同 时 ,也 有 很 多 的 知名 品牌 需要 在 移动 应 用 设备 上 开发 自己 的 用 户 端 , 面 对 
这 样 的 应 用 ,我 们 的 图 标 设 计 反 而 非常 的 简单 了 ,由 于 应 用 的 针对 性 强 , 且 品牌 的 知名 度 高 ， 
所 以 直接 利用 品牌 的 Logo 就 可 以 既 恰 当 又 直观 地 表现 出 应 用 的 价值 ,同时 也 会 被 用 户 所 
认可 。 

这 就 是 我 们 的 第 四 个 思路 ,直接 使 用 品牌 的 Logo、 名 称 或 开头 字母 作为 图 标的 图 形 元 
素 ( 见 图 9-27) 。 然 而 我 们 曾经 提 到 过 ,商标 和 图 标 是 有 本 质 区 别 的 ,因此 我 们 在 图 标 中 使 
用 商标 的 时 候 ,前 提 是 商标 的 含义 或 价值 已 经 被 用 户 所 熟知 ,否则 的 话 设计 出 来 的 图 标 会 使 
让 人 无 法 理解 ,不 知 所 云 。 


Ap 
ePrint 


(a) Nike+Basketball (b) HP ePrint service (c) Facebook 

















图 9-27 1OS Æ £& “Nike+ Basketball" , Android 平台 的 
“HP ePrint service” fll Windows Phone 平台 的 “Facebook” 








应 用 图 标的 设计 思路 绝 不 仅仅 只 有 上 述 四 种 ,更 多 的 好 想法 、 好 创意 、 好 思路 有 待 大 家 
去 探索 和 积累 。 只 要 我 们 注意 如 循 图 标 设计 的 原则 ,参考 iOS 移动 平台 的 设计 特点 和 规范 
要 求 ,在 这 个 基础 上 发 挥 自 己 超凡 的 想象 力 , 设 计 出 精彩 的 应 用 图 标 不 成 问题 。 
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9.3 栏 图 标 





iOS 平台 在 系统 内 部 有 一 整套 规范 的 栏 图 标 , 针 对 不 同 的 功能 、 标 签 以 及 导航 栏 , 都 有 
非常 严谨 的 对 应 关系 ,不 可 乱用 。 然 而 ,规范 的 栏 图 标 再 多 再 全 也 不 可 能 把 所 有 的 功能 和 人 情 
形 给 覆盖 ,而 且 开 发 者 和 设计 师 的 想象 力 和 创造 力 是 无 穷 的 ,我 们 经 常会 发 现在 进行 界面 设 
计 的 时 候 找 不 到 对 应 的 标准 栏 图 标 ,那么 没 办 法 了 ,我们 必须 自己 动手 量 身 打 造 一 个 。 

同时 必须 注意 ,普通 的 iOS 栏 图 标 为 了 能 够 放置 在 标准 的 标签 栏 或 工具 栏 上 ,必须 设 
计 成 黑白 色 空 前 影 形式 。 只 有 在 设计 自 定义 图 标 或 表示 图 项 目 里 的 图 标 时 , 才 可 以 根据 应 
用 的 界面 需要 设计 带 有 色彩 或 图 形 特效 的 图 标 ,那么 在 使 用 和 设计 栏 图 标 时 ,我 们 还 要 注意 
几 个 关键 要 点 。 

9.3.1 EG. DERK 

REIER 0 EZE M ES | 8 Fg IP CR F3 I FRE VA Je BP nh y T E f D ER 
面 , 因 此 栏 图 标 设计 一 定 要 以 明确 的 提示 、 引 导 或 警告 为 目的 。 栏 图 标的 设计 表面 上 看 来 伺 
乎 不 难 ,但 实际 上 需要 设计 师 非 常 高 超 的 造型 能 力 和 软件 图 形 绘制 技术 。 当 然 , 也 可 以 从 网 
上 的 图 标 商 店 下 载 一些 免 费 或 收费 的 图 标 设计 。 
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图 9-28 Æ H "glyphish" 的 免费 图 标 
图 9-28 展现 了 大 量 设计 师 目 创 的 栏 图 标 , 丰 富 多 样 且 细 致 规范 ,我 们 可 以 从 中 体会 到 
设计 这 类 图 标 应 该 体 循 的 方法 和 理念 。 前 先 , 栏 图 标 是 以 单 色 为 基础 的 ,也 就 是 要 设计 成 黑 
日 的 ,因为 大 多 人 情况 下 的 栏 图 标 都 是 以 单 色 或 铁 空 的 形式 显示 的 ,即使 需要 添 加 色调 ,也 可 
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以 在 单 色 基础 上 进行 附加 。 同 时 ,图 形 部 是 以 平 铺 、 藤 影 的 方式 处 理 , 尽 可 能 地 简化 和 清晰 ， 
不 做 任何 的 修饰 和 效 有 果 。 最 关键 的 是 栏 图 标的 图 形 设计 一 定 要 休 循 符号 化 的 原则 ,也 就 是 
利用 最 概括 的 手法 ,下 接地 表达 你 所 需要 表现 的 对 象 。 

IOS 7 的 栏 图 标 设 计 风 格 也 发 生 了 一 些 改变 ,除了 前 面 提 到 的 线条 变 得 精美 和 纤细 外 ， 
图 形 构 成 上 也 需要 更 加 细腻 地 把 握 , 比 如 尽 可 能 地 使 用 线条 而 不 是 填充 图 形 来 表现 造型 , 线 
条 粗细 相对 均匀 ,通过 图 9-29 可 以 感觉 到 ,iOS 7 全 新 的 栏 图 标 设计 风格 更 加 经 典 和 秀美 。 








OS 7 Une Ilcon Pack 





图 9-29 来 日 设计 师 Llja Miskov 的 免费 图 标 


在 设计 的 过 程 中 ,我 们 的 出 发 点 不 要 定位 在 绘制 一 个 精美 细致 的 图 案 ,转变 一 下 观念 ， 
我 们 是 在 制作 一 个 便于 识别 并 能 够 留 下 印象 的 符号 ,这 样 , 栏 图 标 设计 也 许 会 少 走 很 多 到 
路 。 因 为 绘制 图 案 的 过 程 是 添加 细节 和 抽象 图 形 的 过 程 ,而 制作 符号 的 过 程 是 简化 图 形 和 
直观 表达 的 过 程 。 这 之 间 的 差别 很 大 ,而 简约 、 和 下 观 才 是 需要 的 结果 ,只 有 人 简约 ,才能 使 它们 
适应 各 种 环境 和 大 小 ; 只 有 直观, 才 可 以 用 它 代 蔡 文 字 。 

我 们 可 以 看 到 图 9-30 中 iOS 平台 的 “Where To?” 界 面 上 的 栏 图 标 设 计 就 非常 直观 ,无 
需 文字 注释 就 可 以 对 图 标的 含义 清晰 明了 。“News360” 的 栏 图 标 将 图 形 简 化 得 非常 得 体 ， 
无 论 是 缩小 还 是 透明 模糊 的 环境 下 痢 可 以 清晰 地 识别 出 来 ,同时 根据 功能 的 需要 设计 了 一 
些 专用 图 标 , 并 且 与 iOS 平 台 的 原 有 图 标 共 同 使 用 ,能 够 达到 视觉 上 协调 统一 。 
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(a) Where To? (b) News360 
图 9-30 10S Æ £& "Where To?" fli ^News360" 
9.3.2. iOS 平台 栏 图 标的 规范 和 含义 
为 了 能 家 


让 大 家 比较 直观 地 体会 它们 之 间 的 差异 和 
分 栏 图 标 进 行 一 下 对 比 ( 见 图 9-31) 


往 , 我 们 把 iOS 平 台 不 同 版 本 的 部 








图 9-31 


对 比 iOS 平 台 的 部 分 工具 栏 图 标 
我 们 看 到 所 有 的 图 标 剖 有 非 第 明确 的 含义 ,因此 在 使 用 这 


x H K] 


些 图 标的 时 候 一 定 要 严格 对 
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应 使 用 ,不 能 想当然 地 把 它们 张 冠 至 戴 , 每 个 图 标的 使 用 方法 可 以 参看 10S 平 台 的 《人 机 和 界 
面 指 丙 》。 当 然 各 个 平台 之 间 的 图 标 也 不 能 互 换 。 我 们 在 设计 目 己 的 栏 图 标 时 ,也 应 该 细心 
地 揣 压 它们 各 上 自 的 图 形 特点 和 处 理 细 市 的 方式 ,设计 出 和 1O0S 平 台风 格 配 套 的 图 标 作 品 ， 
那么 我 们 目 己 在 设计 栏 图 标的 时 候 应 该 遵循 什么 思路 和 方法 呢 ? 

同时 ,在 栏 图 标 制 作 规 格 上 ,iOS 平 台 也 有 明确 的 要 求 : iPhone,iPod touch 以 及 iPad 
上 的 工具 栏 . 导航 栏 图 标 太 二 为 22X22 ga CLP] ii Bf RR TJ 440€ 44 ER RO ,标签 柱 图 标尺 寸 为 
30X30 点 或 48X32 点 (视网膜 屏幕 为 60X 60 像素 或 96X64 像 系 ), 同 时 注意 在 制作 时 要 
使 用 抗 锯齿 处 理 。 


9.3.3 几 个 有 效 的 简化 图 像 的 方法 


前 面 讲 到 , 栏 图 标的 特点 应 该 是 简约 平面. 耳 观 。 但 是 面 对 一 个 现实 中 的 事物 ,怎样 才 
能 把 它 价 化 成 一 个 简单 精巧 的 图 标 呢 ?这 个 过 程 可 以 分 三 步 来 完成 。 

(1) 确定 事物 的 基本 外 形 。 任 何事 物 都 有 它 的 外 形 , 有 的 事物 外 形 明 确 、 人 简单 ,如 建筑 、 
交通 工具 、 电 子 设备 等 工业 产品 ,有 的 事物 外 形 就 比较 复杂 其 至 繁 开 , 如 植物 动物 、 山 水 等 
目 然 环境 ,还 有 的 事物 没有 外 形 , 甚 至 只 有 抽象 的 概念 ,例如 气体 、 声 音 、 震 动 、 发 光 等 。 我 们 
要 有 意识 地 把 这 些 事物 的 外 形 有 具体 化 并 加 强 。 

(2) 几何 化 。 虽 然 确 定 了 事物 的 外 形 ,但 是 我 们 得 到 的 这 个 外 形 轮廓 比较 索 琐 ,也 不 规则 
和 简约 ,所 以 我 们 束 要 在 这 个 外 形 的 基础 上 把 它 几 何 化 。 也 就 是 使 用 和 矩形、 加 形 、 三 角形 这 样 
的 几何 图 形 , 把 不 规则 的 地 方 规则 化 ,把 杂乱 的 地 方 整齐 化 ,使 图 形 看 上 去 比较 规整 或 对 称 。 

(3) 符号 化 。 几 何 化 后 的 图 形 虽 然 看 上 去 规整 但 还 是 显得 有 点 复杂 ,不够 简约 ,所 以 我 
们 要 在 这 个 图 形 的 基础 上 做 减法 , 尽 可 能 地 把 它 人 简化 成 一 个 非常 饱满 的 符号 或 形状 。 这 个 
步 骂 其 实 就 是 简约 化 的 过 程 , 非 第 考验 设计 师 的 造型 能 力 和 细节 处 理 ( 如 图 9-32 所 示 )。 






































图 9-32 简化 图 像 的 三 个 步 又 
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在 设计 栏 图 标的 时 候 , 能 和 否 控制 好 图 形 的 轮廓 特征 也 很 重要 。 如 果 网 形 轮廓 边缘 不 规 

整 ,不 流畅 或 者 过 于 繁琐 ,都 会 减弱 图 标的 视觉 凝聚 力 和 醒目 感 。 这 里 有 一 个 比较 有 效 的 方 

法 可 以 尝试 ,就 是 把 图 形 放 进 一 个 几何 图 形 里 面 ,如 正方 形 、 圆 形 或 圆 角 和 矩形 等 ,用 几何 图 形 

作为 栏 图 标的 轮廓 边缘 ,这 样 就 非常 简单 地 加 强 了 图 标的 视觉 凝聚 力 ,可 以 通过 图 9-33 体 
会 到 。 
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图 9-33 1OS 平台 的 “PDF Expert", Android ¥ £i HJ ^ Circle" fll Windows Phone ¥ £& RJ ^ Mail. Ru” 


解决 了 应 用 的 图 标 问题 ,用户 体 验 设 计 终 于 完成 了 画龙点睛 ,似乎 整个 项 目 就 大 功 告 成 
了 了。 但 是 ,还 有 一 个 环节 别 筷 了 ,在 先 面 上 点 击 岁 标 之 后 ,并 不 是 马上 进入 应 用 程序 的 ,往往 
需要 等 那么 几 秒 钟 , 这 个 时 候 屏幕 上 呈现 的 是 应 用 程序 的 局 动画 面 , 这 个 环节 于 万 不 能 
RA. 














9.4 局 动画 面 和 引导 帮助 





我 们 的 应 用 和 所 有 的 移动 应 用 一 样 , 当 用 户 点 击 应 用 图 标 打 开 应 用 的 时 候 , 总 要 等 上 那 
么 两 三 秒 ,虽然 这 个 时 间 并 不 算 瘟 长 ,但 是 对 充满 期 外 ee 
段 时 间 。 因 此 ,这 个 环节 的 设计 绝对 不 能 忽视 ,不 但 如 此 ,我 们 一 定 要 珍惜 这 两 三 秒 钟 的 时 
间 , 给 用 户 留 下 更 加 深刻 .精采 8 的 视觉 印象 
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9.4.1 局 动画 面 


当 用 户 点 击 了 应 用 图 标 之 后 ,操作 系统 会 从 存储 空间 里 调用 并 运行 应 用 的 代码 ,这 期 间 
需要 等 竺 一段 时 间 。 这 时 ,系统 会 在 屏 大 上 先 抛 出 一 张 图 片 或 动画 ,这 就 是 应 用 的 启动 画 
面 。 它 通 第 会 占 满 你 的 整个 屏 副 ,而 内 容 通 常 是 应 用 的 名 称 、 开 发 企业 的 logo 和 应 用 界面 
中 代表 性 的 图 形 意象 。 


Gene 





(a) Skype (b) GT Racing 
图 9-34 ”应 用 启动 画面 GPhone 上 的 “Skype” 和 iPad 上 的 “GT Racing” 游 戏 ) 


从 图 9-34 中 看 到 的 是 比较 常见 的 启动 画面 ,展示 的 是 应 用 的 名 称 或 logo, 大 部 分 都 是 
用 动画 的 方式 来 展示 ,并 且 设 计 美 观 ,做 工 精 细 。 但 是 ,这 样 的 展示 方法 有 些 人 并 不 赞成 ,从 
1999 年 开始 ,各 大 网 站 都 开始 热衷 于 无 故 添 加 Flash 引导 动画 ,很 多 用 户 会 认为 是 在 故意 
拖延 启动 时 间 ,为 的 就 是 展示 你 自己 的 logo。 因 此 , 越 来 越 多 的 开发 者 放弃 了 这 种 启动 方 
式 , 而 10S 平 台 引 入 了 一 个 更 加 入 性 化 的 启动 理念 。 

仁 果 公司 建议 把 启动 画面 做 得 和 应 用 的 首页 一 模 一 样 ,只 是 没有 实际 的 内 容 , 实 际 上 就 
是 应 用 主页 的 背景 。 这 种 方式 会 让 用 户 以 为 已 经 看 到 了 界面 ,虽然 代码 还 没有 开始 运行 ,但 
是 感觉 上 应 用 已 经 启动 成 功 了 ,只 是 还 差 一 点 点 ,正在 努力 地 加 载 ,这 样 实 际 上 会 给 用 户 一 
个 启动 非常 迅速 的 错觉 ( 见 图 9-35), Æ iOS 7 的 简洁 设计 理念 里 更 应 该 加 强 这 种 意识 。 

以 上 两 种 形式 的 启动 画面 各 有 所 长 ,但 是 后 者 给 用 户 的 感觉 更 亲近 、 自 然 。 前 者 相对 来 
说 更 像 是 在 做 自我 介绍 或 广告 。 











-— 
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图 9-35 1086 上 “天 气 ” 应 用 的 启动 画面 和 应 用 主页 ( 左 图 为 10S 6 , 右 图 为 10S 7) 


应 用 局 动 完成 ,用 户 顺 利 地 进入 主页 ,如果 你 的 应 用 功能 直观 操作 休 便 ,用 户 一 看 就 会 
知道 怎么 用 ,但 是 有 的 应 用 功能 相对 复杂 , 且 任 务 么 多 ,用 户 有 可 能 会 有 些 迷 惑 , 不 知 该 从 何 


-一 








处 下 手 , 这 个 时 候 , 添 加 一 些 引 导 玫 助 信 息 会 很 有 用 。 
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(a) iOS 平 台 的 “Dcovery” (b) Android 平 台 的 You Tube" 


图 9-36 ”应 用 的 引导 帮助 信息 
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图 9-36 中 展示 了 两 款 应 用 的 引导 帮助 设计 。 一 般 来 说 ,引导 帮助 只 在 第 一 次 或 前 几 次 
局 动 应 用 时 显示 。 这 样 的 安排 会 给 用 户 一 个 初次 见面 ,相互 问候 的 印象 和 感觉 , 束 像 铺 开 T 了 
一 个 迎 宇 地 毯 。 

现在 终于 完成 了 一 套 完 美的 用 户 体 验 设计 ,相信 你 的 作品 一 定 非常 精彩 ,在 移动 商店 的 
货架 上 会 摆 放 着 它 精 美的 应 用 图 标 , 会 有 很 多 下 运 的 用 户 购 天 并 下 载 你 的 应 用 。 现 在 ,我 们 
已 经 成 功 地 把 目 己 打造 成 了 一 位 移动 应 用 的 用 户 体 验 设 计 师 1 














iOS 应 用 设计 项 目 实践 


一 一 “2016 里 约 热 内 户 奥运 会 "应 用 项 目 敏捷 设计 


随 着 我 们 对 移动 应 用 用 户 体验 设计 的 了 解 逐 渐 趋 于 全 面 和 完整 ,我 们 也 迎 来 了 本 书 的 
最 后 一 半 。 本 章 将 通过 对 一 款 应 用 “2016 里 约 热 内 户 奥运 会 ”的 用 户 体验 设计 ,从 项 目 开 始 
到 最 终 的 设计 完成 的 整个 过 程 来 将 本 书 的 内 容 和 关键 点 进行 一 次 串联 和 回顾 ,使 大 家 通 
过 一 个 实际 的 案例 ,更 加 深入 地 对 移动 应 用 用 户 体 验 设 计 的 思路 流程 和 方法 进行 一 次 
全 面 的 探索 和 实践 。 当 然 ,这 里 面 也 纺 藏 着 很 多 经 验 和 诀 守 ,相信 大 家 能 从 中 得 到 很 多 
局 发 。 

这 里 提 到 的 敏捷 设计 ,主要 是 设计 对 过 程 的 简化 ,使 我 们 能 够 更 加 灵活 地 安排 进度 。 





10.1 项 目 概 述 及 工作 计划 








2012 年 伦敦 奥运 会 刚刚 结束 ,我 们 团队 就 在 想 开发 一 个 介绍 体育 比赛 的 应 用 。 比 赛 类 
应 用 是 有 时 效 性 的 ,用 户 只 会 在 比赛 之 前 使 用 , 比赛 结束 后 也 就 没有 人 使 用 了 ,而 且 比赛 项 
目 .比赛 的 日 程 表 等 信息 会 有 一 些 变化 。 但 是 我 们 对 于 体育 的 热爱 还 是 让 我 们 决定 开发 下 
一 届 奥 林 匹 克 运 动 会 (2016 里 约 热 内 卢 奥林匹克 运动 会 ) 应 用 。 

由 于 目前 距离 2016 奥运 会 开幕 时 间 还 有 3 年 多 ,官方 没有 给 出 太 多 的 信息 ,而 且 随 着 
时 间 的 推进 ,比赛 信息 会 逐步 发 布 ,所 以 我 们 的 应 用 也 会 随 着 这 些 信息 的 公开 而 发 布 新 的 版 
本 。 这 个 应 用 的 发 布 情况 请 读者 关注 我 们 团队 的 网 站 www. 51work6. com, 这 个 应 用 的 源 
代码 也 会 开源 给 大 家 ,大 家 需要 在 法 律 许可 范围 内 使 用 这 些 源 代码 ， 

接 下 来 ,我 们 将 从 描述 项 目 启动 及 制定 计划 的 过 程 开始 设计 ， 

10.1.1 项 目 描述 

首先 介绍 应 用 的 需求 ,根据 现在 对 2016 年 奥运 会 掌握 的 信息 ,我 们 能 够 在 应 用 中 提供 
的 信息 是 举办 城市 .会徽 .开幕 时 间 、 比 赛 项 目 和 比赛 日 程 等 信息 ,其 中 比赛 日 程 中 的 场地 信 
息 还 没有 确定 ,会 歌 等 信息 也 没有 确定 。 因 此 ,经 过 整理 ,这 个 应 用 能 够 提供 的 功能 
2016 年 奥运 会 一 些 基 本 信息 .比赛 项 目 、 倒 计时 和 比赛 日 程 等 
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针对 这 球 应 用 的 设计 和 开发 ,必须 在 项 目 局 动 的 同时 ,对 整个 项 目 内 容 和 细节 做 一 个 充 
分 的 预 估 ,同时 ,为 它 的 实施 过 程 制 定 一 个 合理 的 计划 。 为 了 能 够 在 之 后 的 工作 中 保持 思路 
清晰 明确 以 及 团队 的 配合 和 相互 协调 ,我 们 必须 在 项 目 局 动 前 认真 填写 以 下 内 容 。 








针对 的 移动 设备 : 手机 和 平板 电脑 。 

应 用 类 型 : 效率 型 。 

针对 的 用 户 群 : 体育 爱好 者 .旅游 爱好 者 、 职 业 体 育 人 。 

应 用 的 使 用 平台 : iOS, 

应 用 设备 的 屏幕 规格 : iPhone 1136X640 像素 ,iPad 2048X1536 像素 。 
屏幕 方向 及 旋转 : 竖 屏 ,不 支持 转 屏 .。 

项 目 开 发 周期 : 4 周 ， 

应 用 的 用 户 体验 设计 方向 : 相对 个 性 化 。 

相似 的 同类 产品 : Join in、 伦 敦 奥 运 旅 游 地 图 。 








明确 了 上 述 条 目 后 ,就 可 以 着 手 开 始 进 行 用 户 体 验 设计 了 。 值 得 一 提 的 是 ,“ 应 用 的 用 
户 体验 设计 方 癌 ?似乎 有 些 抽象 ,不 像 其 他 条 目 那 么 明确 。 其 实 这 是 在 项 目 起 始 必须 确定 的 
一 个 设计 方 问 , 通 稼 分 为 三 个 方向 : 规范 化 .相对 个 性 化 和 完全 个 性 化 。 那 么 它 的 确定 关系 
到 我 们 在 市 场 定 位 、 系 材 收集 .布局 安排 以 及 与 编程 人 员 的 事先 协调 与 沟通 等 等 诸多 的 工 
VE ,我 们 不 能 只 顾 视 党 上 的 华丽 而 不 关心 编程 人 员 的 蔷 吾 。 


10.1.2 工作 计划 和 流程 


制定 项 目的 工作 计划 有 两 种 方法 : 一 是 可 以 以 时 间 段 内 完成 的 进度 为 标准 ; 二 是 可 以 
以 工作 流程 中 每 个 任务 完成 的 时 间 点 为 标准 。 为 了 使 大 家 对 完成 项 目的 过 程 更 加 清晰 ,我 
们 选择 第 二 种 ,也 就 是 以 流程 为 主线 来 制定 工作 计划 。 

任务 1: 市 场 定 位 及 产品 分 析 。 

任务 2: 项 目的 用 户 需 求 分 析 。 

任务 3: 确定 导航 方式 和 功能 后 。 

任务 4: 绘制 操作 流程 的 原型 草图 。 

任务 5: 项 目的 高 保 真 原型 。 

任务 6: 项 目的 可 用 性 测试 及 调整 。 

任务 7: 完善 界面 的 个 性 化 设计 。 

任务 8: 图 标 设 计 及 局 动画 面 。 

有 了 明确 的 工作 流程 ,就 可 以 按 部 束 班 地 开始 项 目 实 践 了 。 需 要 提醒 大 家 : 有 些 步 又 
并 不 是 一 次 完成 的 ,好 的 想法 或 创意 需要 反复 推敲 、 修 改 , 有 时 其 至 推翻 重 来 。 因 此 ,计划 并 
不 是 一 成 不 变 的 ,而 是 一 个 递 进 和 迭代 的 过 程 。 计 划 永 远 赶不上 变化 ,最 终 的 目的 是 要 以 完 
善 用 户 体验 设计 为 准 , 而 不 是 按 部 束 班 单纯 地 完成 任务 。 
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10.2 项 目的 准备 阶段 


在 这 个 阶段 里 ,要 完成 计划 中 的 两 项 任务 ,分别 是 项 目的 市 场 定位 产品 分 析 和 用 户 需 





10.2.1 市 场 定 位 及 产品 分 本 

虽然 距离 里 约 热 内 户 奥 运 会 的 开幕 时 间 还 很 远 , 能 够 收集 到 的 信息 和 图 像 比 较 有 限 。 
但 是 我 们 想 要 做 的 ,是 一 亚 操 作 方 便 、 和 商 单 易 用 .美观 大 气 的 高 效应 用 程序 ,这 就 是 我 们 这 和 
应 用 的 特色 之 处 。 

在 进行 项 目 描述 的 时 候 , 我 们 列举 了 两 丈 相 关 的 类 似 产品 ( 见 图 10-1) ,虽然 它们 都 是 
针对 2012 年 伦 吾 奥运 会 的 ,但 是 对 我 们 的 应 用 设计 还 是 具有 很 大 的 参考 价值 。 对 相关 的 类 
似 产 品 的 分 析 是 非 篆 重要 的 工作 和 步 又 ,通过 了 解 这 些 产 品 , 可 以 去 粗 取 精 , 完 善 目 己 的 功 
能 ,强化 目 己 的 优势 。 
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In 2012. Tate Modem will present the first 
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Hirst is one of the most prominent artists to have 
emerged from the British art scene in the 1990s 
and is widely regarded as one of the most 
important artists working today 


This exhibition will provide a journey through 25 
A years of Hirst's inventive practice 


ere m boi ep ciue t ty 
exhibition will leature sculptures from the 
1999 iudina The Physical i n 
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图 10-1 android P f E RJ"Join In” 和 iO0S 平 台 上 的 “伦敦 奥运 旅游 地 图 ” 
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这 两 款 应 用 的 共同 缺点 就 是 层级 有 些 繁琐 ,需要 摸索 和 设置 一 下 才 可 以 实现 操作 。 而 
我 们 的 应 用 遵循 简约 之 上 的 原则 ,因此 我 们 的 优势 应 该 是 操作 简练 .直接 ,优化 层级 和 直观 
参照 。 同 时 ,从 视觉 角度 上 两 款 应 用 在 界面 细节 和 文字 把 握 上 相对 平淡 和 粗糙 ,色彩 不 够 鲜 
i5 ,没有 体现 出 充满 激情 的 体育 精神 。 因 此 ,我 们 要 在 功能 简约 的 同时 加 强 界 面 的 个 性 化 和 
视觉 冲击 力 以 及 色彩 感染 力 , 同 时 也 要 突出 iO0S 平 台 的 特色 。 当 然 ,它们 的 优点 我 们 也 要 
加 以 参考 ,功能 全 面 、 结 构 严 并 、 按 键 鲜 明 突 出 等 等 。 

那么 通过 上 述 对 相关 应 用 的 分 析 , 我 们 对 自己 产品 需要 具备 的 特点 和 优势 进行 一 下 
总 结 

(1) 操作 简练 ; 

(2) 结构 人 简单、 优化 层级 ; 

(3) 界面 视觉 个 性 鲜明 ; 

(4) 加 强 OS 平台 的 特色 。 

同时 ,还 要 考虑 到 Android 平台 或 Windows Phone 平台 的 移植 ,因此 界面 元 素 应 该 相 
对 中 性 和 易于 改变 ,这 样 在 移植 的 时 候 比 较 方便 ,避免 重复 设计 。 


10.2.2 项 目的 用 户 需 求 分 析 


进行 用 户 需 求 分 析 ,首先 要 从 了 解 应 用 针对 的 用 户 群 体 开 始 。 在 前 面 的 项 目 描述 中 提 
到 了 三 类 人 : 体育 爱好 者 .旅游 爱好 者 、 职 业 体 育 人 。 其 中 职业 体育 人 包括 职业 运动 员 、 体 
育 经 济 人 和 体育 媒体 记者 等 。 这 三 类 人 和 群 有 共同 点 也 有 差异 性 。 体 育 爱好 者 相对 来 说 比较 
关注 比赛 的 日 程 安排 .比赛 时 间 表 和 场次 ,对 地 理 位 置 和 比赛 环境 并 不 太 挑 剔 ,而 旅游 爱好 
者 相对 来 说 比较 关心 地 理 位 置 、 环 境 和 交通 便利 性 ,对 比赛 场次 和 日 程 安排 方面 相对 次 要 ， 
而 职业 体育 人 往往 出 于 专业 需要 对 上 述 的 几 个 环节 都 会 比较 关注 。 因 此 在 设计 中 我 们 必须 
加 强 这 些 方面 的 功能 。 同 时 ,针对 不 同 用 户 群 体 的 差异 性 需求 ,我 们 应 该 在 应 用 中 给 出 更 多 
的 选项 以 满足 他 们 不 同 的 需求 。 

通过 上 述 分 析 ,我 们 在 应 用 的 用 户 体 验 设 计 中 应 突出 以 下 几 个 方面 的 功能 。 

(1) 2016 奥运 会 基本 信息 ; 

(2) 比赛 项 目 索引 ; 

(3) 开幕 式 倒 计时 ; 

(4) 比赛 日 程 列表 ; 

(5) 比赛 地 图 和 和 定位 。 

不 过 ,我 们 也 要 注意 ,过 多 的 功能 点 会 使 界面 变 得 拥挤 ,操作 变 得 繁 开 ,降低 了 用 户 的 操 
作 体 验 。 这 就 违背 7 了 我们 在 上 一 小 市 所 阐述 的 应 用 操作 价 练 和 功能 专 一 的 特性 ,这 中 间 的 
和 蔬 盾 需要 在 接 下 来 的 设计 工作 中 进行 取舍 和 协调 。 
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10.3 从 原型 草图 到 拟 物化 实现 





本 书 要 按照 先前 计划 的 步 坚 ,从 产品 创意 、 原 型 草图 到 可 用 性 测试 和 界面 细节 处 理 的 全 
过 程 对 项 目 进行 初步 的 完成 ,并 根据 传统 的 OS 拟 物 化 风格 进行 完善 ,目的 是 与 之 后 的 iOS 7 
的 局 平 化 风格 做 一 个 参照 ,使 大 家 得 到 更 加 全 面 的 设计 经 验 。 


10.3.1 创意 与 原型 于 图 


接 下 来 我 们 需要 完成 计划 中 的 两 项 任务 : 确定 应 用 的 导航 方式 和 功能 点 ; 绘制 操作 流 
程 的 原型 草图 。 在 这 两 个 环 市 中 ,我 们 需要 把 应 用 的 导航 、 大 的 布局 以 及 所 有 的 功能 点 确 害 
下 来 ,并 把 操作 流程 的 整体 规划 和 设想 绘制 成 草图 。 由 于 导航 和 布局 的 确定 过 程 比 较 抽象 ， 
而 且 草 图 绘制 描述 起 来 比较 乏味 ,所 以 这 两 个 任务 可 以 放 到 一 起 论述 。 先 来 看 一 下 操作 流 
程 的 原型 草图 ( 见 图 10-2) 。 














图 10-2 iOS 6 “2016 里 约 热 内 户 奥 运 会 ”应 用 用 户 体 验 设计 操作 流程 原型 草图 





原型 设计 草图 对 于 应 用 开发 的 设计 人 员 、 开 发 人 员 测试 人 员 、UI 设 计 师 以 及 用 户 都 是 
非常 重要 的 。 根 据 前 面 对 应 用 的 市 场 分 析 和 功能 的 规划 ,我 们 先 选 择 标 签 和 树 形 相 结合 的 
导航 方式 作为 我 们 的 交互 方式 和 界面 整体 布局 。 通 过 图 10-2, 可 以 比较 清晰 地 了 解 应 用 界 
面 \ 布 局 及 导航 的 具体 安排 。 

主页 设置 了 5 个 标签 ,分 别 是 Home, Events, Count Down,Sohedule 和 About。 每 个 标 
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签 对 应 春 一 个 选择 页 面 , 分 别 展示 了 5 个 版 块 的 内 容 。 

(1)“Home” 标 签 采 用 标准 的 平 铺 式 布局 ,展示 了 本 次 奥运 会 的 相关 信息 和 信介 ,同时 
加 入 一 些 体育 项 目的 图 片 。 

(2)“Events” 展 现 了 奥运 会 的 各 个 比赛 项 目 , 采 用 了 陈列 室 布局 和 树 形 的 导航 结构 。 
每 一 个 比赛 项 目 都 可 以 点 击 打 开 , 浏 览 人 简 介 和 相关 信息 并 通过 “地 图 ”工具 查看 赛场 位 置 。 
由 于 2016 奥运 会 的 吉祥 物 和 项 目标 志 还 没有 产生 ,所 以 暂时 使 用 2012 伦 致 奥运 会 的 标识 ， 
并 随时 通过 升级 版 本 来 更 新 内 容 。 

(3) "Count Dowam ”是 比赛 的 日 程 安排 列表 ,采用 10S 规范 的 分 组 列表 方式 并 可 以 通过 
比赛 名 称 的 开头 字母 来 快速 索引 。 

(4)“Sohedule” 是 开 磊 式 的 倒计时 功能 ,也 是 作为 天 注 奥 运 会 的 广大 用 户 必 不 可 少 的 
功能 ,倒计时 设置 了 三 个 计时 单位 ,分 别 是 天 、 小 时 和 分 钟 。 

(5)“About” 是 关于 我 们 ,简单 介绍 开发 团队 ,同时 添加 网 站 链接 和 地 图 链接 。 

在 “Events” 的 导航 栏 里 ,我 们 使 用 了 10S 平台 规范 的 导航 按钮 ,表现 在 左 侧 的 “返回 
键 ”。 安 排 好 应 用 的 导航 、 布 局 以 及 操作 流程 后 ,就 可 以 打开 计算 机 ,在 图 形 软件 上 用 像素 来 
描绘 应 用 界面 了 。 


10.3.2 项 目的 平面 图 像 原 型 


接 下 来 需要 先 按 照 原 型 草图 的 规划 ,制作 出 一 套图 像 原 型 文件 ,再 利用 这 套 文 件 对 应 用 
的 布局 和 界面 安排 进行 可 用 性 测试 。 

我 们 使 用 最 第 用 的 计算 机 图 形 软件 Photoshop 来 制作 原型 文件 ,为 了 更 加 地 接近 真实 
的 操作 和 体验 ,我 们 把 图 形 文件 的 尺 才 设 置 得 和 真实 的 设备 的 参数 一 致 ,iPhone 的 1136 X 
640 像素 和 iPad 的 2048X1536 像素 ,同时 认真 参考 了 10S 平台 界面 元 素 的 像素 大 小 的 规 
范 ,遵循 以 44 点 (88 像素 ) 高 度 为 单位 的 界面 设计 规律 。 当 然 ,在 空间 安排 细节 处 理 以 及 
文字 排版 方面 ,同样 需要 一 丝 不 和 苟 地 把 每 一 个 页 面 把 握 好 ( 见 图 10-3) 。 

在 设计 的 过 程 中 ,我 们 参考 了 里 约 热 内 卢 奥 运 会 的 官方 网 站 ,采用 了 带 有 南美 热带 和 从 
林 气 息 的 高 纯度 色彩 ,使 整个 应 用 充满 了 运动 的 激情 和 速度 感 。 为 了 便于 修改 和 测试 ,我们 
采用 了 108 传统 的 控件 样式 和 网 形 元 素 ,并 与 之 相配 套 的 采用 了 拟 物化 的 设计 风格 ,整体 
设计 遵循 了 IOS 6 的 设计 规范 ,并 在 其 中 做 了 一 些 个 性 化 的 修改 ,主要 反映 在 标签 栏 图 标 和 
图 形 视 觉 元 素 上 。 在 设计 倒计时 牌 的 时 候 , 为 了 加 强 比 赛 的 实况 效果 ,我 们 使 用 了 老式 记分 
牌 的 造型 来 隐喻 ,也 突出 了 拟 物化 的 设计 风格 。 同 时 ,我 们 还 要 把 设计 结果 移植 到 iPad 上 
去 ( 见 图 10-4). 

可 以 看 到 ,在 从 iPhone 移植 到 iPad 的 过 程 中 很 多 细 市 都 要 重新 设计 和 布局 ,由 于 屏幕 
尺寸 和 高 宽 比 都 不 相同 ,所 以 从 整体 构图 、 细 节 处 理 到 文字 排版 都 要 重新 进行 把 握 和 推 项 。 
接 下 来 ,就 可 以 通过 可 用 性 测试 来 进一步 完善 了 。 
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3 i c3 
Baci Events 


Basketball 


At the London 2012 Olympic 
Games, one of the world's most 
popular and fastest-growing team 
sports will be showcased at the 
Basketball Arena and North 
Greenwich Arena. 


















Key Facts 


Basketball was invented in 1891 
by Dr James Naismith, a Canadian 
popular and fastest-growing team 
sports will be showcased at the 
At the London 2012 Olympic 
Games, one of the world's most 
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图 10-3 iOS Æ f7"2016 里 约 热 内 户 奥 运 会 "应 用 电子 原型 设计 
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图 10-4 iPad "2016 里 约 热 内 卢 奥 运 会 > 应 用 电子 原型 设计 
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10.3.3 ”图像 原 型 的 可 用 性 测试 及 调整 


进行 可 用 性 测试 是 一 个 非常 重要 的 步 又 。 与 测试 程序 不 同 ,可 用 性 测试 没有 明确 的 测 
试 结 果 , 得 到 的 往往 是 操作 过 程 上 或 细 市 处 理 上 散乱 的 意见 和 评价 。 其 实在 整个 项 目 设计 
的 过 程 中 ,我 们 通常 要 进行 很 多 次 的 测试 ,从 原型 草图 完成 开始 ,几乎 每 个 步骤 部 会 想 方 设 
法 寻找 机 会 进行 测试 ,而 每 次 测试 的 内 容 也 会 有 所 不 同 。 

原型 草图 阶段 主要 是 进行 操作 流程 的 测试 。 方 法 很 简单 ,把 每 个 原型 页 面 用 手机 上 的 
相机 功能 单独 拍摄 ,编号 顺序 ,在 图 片 浏览 如 里 左右 滑动 进行 体验 。 当 然 , 这 样 的 粗 烟 画面 
用 不 春 去 找 不 相干 的 人 来 给 你 提 意 见 , 团 队 内 部 简单 消化 一 下 就 足够 了 。 

电子 原型 测试 起 来 就 直观 很 多 了 。 首 先 依然 是 操作 流程 上 的 测试 ,在 后 面 的 内 容 里 我 
们 同样 要 借助 Xcode 把 页 面 点 击 跳 转 的 过 程 做 成 一 个 简单 的 交互 程序 ,这 样 测试 者 像 是 真 
的 在 运行 这 个 程序 一 样 。 同 时 画面 也 比较 精细 和 完整 ,完全 可 以 去 拿 给 团队 之 外 的 人 去 寻 
求 意 见 了 。 图 像 原型 阶段 男 一 个 测试 就 是 人 体 工程 学 方面 的 体验 ,这 个 必须 在 手机 上 进行 
实际 的 把 挖 和 操作 尝试 ,而 且 要 尺 可 能 地 寻求 与 项 目 不 相 干 的 人 员 帮 助 , 因 为 每 天 面 对 目 己 
的 项 目 , 心 理 上 和 视觉 上 总 会 有 些 先 入 为 主 的 惯性 思维 ,很 难 发 现 生理 习惯 上 的 错误 和 问 
iB KI 10-5 为 1OS 平 台 “2016 里 约 热 内 户 奥 运 会 "应 用 可 用 性 测试 情况 。 

















图 10-5 ” iOS 平台 “2016 里 约 热 内 户 奥运 会 "应 用 可 用 性 测试 


10.4 EB iOS 7 的 局 平 化 设计 风格 


在 设计 测 流 多 样 且 不 断 变化 的 今天 ,能 否 适 应 各 个 设计 风格 流派, 以 及 设计 规范 差异 巨 
大 的 各 大 应 用 平台 ,是 对 设计 师 专 业 水 平 最 直接 的 考验 。 因 此 ,针对 平 末 公司 推出 的 最 近 版 
HJ 10S 7 系统 在 设计 风格 和 规范 上 的 重大 改变 ,我 们 重新 以 高 保 真 的 水 准 对 这 区 应 用 进行 
细致 的 局 平 化 设计 。 
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10.4.1 12] 5c 


首先 ,必须 清楚 OS 7 Ja 2E 46 ETT B 49] R «DII SL Js e A BR E fi] E PRAE AN f] Tri 00 06 7U 
ZR o AE ,我们 绝 不 是 简 简 单单 地 把 所 有 的 图 形 元 素 去 掉 光 译 、 阴 影 和 体积 感 使 它们 ”局 平 ”， 
而 是 要 站 在 简约 画面 、 罕 出 核心 内 容 的 基点 上 对 界面 进行 一 次 重新 设计 。 同 时 ,在 色彩 上 ， 
iOS 7 Zo Hl 8H rr JCTEE B qe os £5, ,搭配 纯 日 色 和 淡 灰 色 ,使 所 有 的 元 素 都 非常 的 清晰 和 醒目 。 
从 首页 开始 ,逐一 对 这 区 应 用 进行 刷 平 化 改造 和 再 设计 ( 见 图 10-6) 。 












m - 








图 10-6 ”对 “2016 里 约 热 内 卢 奥 运 会 > 应 用 的 “Home” 页 面 进 行 扁 平 化 设计 


去 反 了 光泽 和 渐变 后 彩 条 的 颜色 会 显得 有 些 生硬 ,因此 必须 借助 色彩 之 间 的 对 比 和 搭 
配 来 使 画面 和 谐 美 观 , 同 时 略微 增加 一 点 阴影 并 不 会 破坏 整体 的 扁平 化 风格 ,反而 会 增加 色 
彩 之 间 的 层次 感 。 不 过 图 片 一 定 要 大 量 精简 ,简约 设计 对 图 片 的 简化 是 第 一 位 的 。 

对 于 “倒计时 ”页 面 的 改造 ,通过 图 10-7 可 以 一 日 了 然 ,除了 去 掉 拟 物化 的 图 形 元 素 ,在 
照片 的 色彩 调整 和 文字 的 字体 及 位 置 关 系 上 都 要 进行 重新 的 细致 推敲 ,添加 的 图 形 元 素 是 
为 了 使 文字 更 加 清晰 和 醒目 。 

对 于 "about” 页 面 的 设计 几乎 是 完全 推翻 重 来 的 ,由 于 扁平 化 设计 的 需要 ,我们 把 色彩 
和 文字 的 字体 都 进行 了 重新 选择 ,使 这 个 页 面 与 其 他 页 面 形 成 了 视觉 上 的 统一 ,同时 与 
“Home” 页 面相 呼应 ( 见 图 10-8) 。 但 是 这 样 一 来 橘 黄色 显得 有 些 泛 滥 , 这 是 一 个 非 消 强烈 
且 容 易 使 人 激动 的 颜色 ,一 旦 过 多 使 用 会 使 人 不 安 , 因 此 在 “Events” 页 面 里 ,我 们 把 体育 项 
目的 标识 背景 做 了 改变 ,以 减轻 用 户 在 视 党 上 的 压力 ( 见 图 10-9). 
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图 10-8 对 ”2016 里 约 热 内 户 奥 运 会 "应 用 的 "about "页面 进行 扁平 化 设计 
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图 10-9 ”对 “2016 里 约 热 内 户 奥运 会 ”应 用 的 “Events” 页 面 进行 局 平 化 设计 


10.4.2 应 用 图 标 和 栏 图 标 


越 是 接近 完成 , 束 越 需要 精心 考虑 、 画 龙 点 睛 ,对 设计 师 的 考验 就 越 深 入 。 对 于 任何 一 
球 应 用 来 说 ,应 用 图 标 和 局 动画 面 剖 是 最 需要 精 雕 细 琢 的 “脸面”。 

细心 的 读者 可 能 已 经 注意 到 标签 栏 的 几 个 标签 栏 图 标 , 在 进行 :OS 7 的 局 平 化 改造 时 
已 经 发 生 了 变化 。 前 面 曾经 谈 到 过 ,ioOS 7 的 标签 栏 图 标 与 字体 一 样 ,都 在 视觉 上 趋 于 纤细 
和 清秀 ,如 采 不 加 改变 地 把 原来 的 图 标 放 上 去 不 但 会 显得 很 粗糙 而 且 会 感到 不 搭配 。 因 此 ， 
这 个 细节 必须 谨慎 处 理 , 把 标签 栏 图 标 按 照 iOS 7 的 特点 进行 改造 ,必要 的 话 还 要 进行 重新 
设计 ( 见 图 10-10)。 标 签 栏 图 标 知 要 制作 成 60 X60 RERAN HAH ETE png 文件 。 


o y o E Q9 














Home Events 


(a) iOS 7 风格 





(b) iOS 6 风格 


图 10-10 “2016 里 约 热 内 卢 奥 运 会 "应 用 的 标签 栏 图 标 两 种 设计 风格 的 比较 
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对 于 应 用 图 标的 设计 ,我 们 也 采用 最 简约 的 处 理 方法 ,采用 2016 年 里 约 热 内 卢 奥 运 会 
的 会 徽 ,以 白色 作为 底 色 ,不 添加 任何 的 特效 和 装饰 。 当 然 ,在 构图 和 空间 位 置 上 还 要 进行 
严谨 的 推敲 和 把 握 。 根 据 iOS 平台 的 要 求 ,我 们 需要 把 应 用 图 标 制作 成 1024X1024 像素 大 
小 的 位 图 ,以便 在 各 种 情形 和 推广 中 使 用 ,而 最 终 显 示 在 iPhone 桌面 上 的 只 有 114 114 像 
素 大 小 ( 见 图 10-11). 





Rio2016 


图 10-11 “2016 里 约 热 内 卢 奥 运 会 ”应 用 的 应 用 图 标 设 计 





10.4.3 ”局 动画 面 设计 

关于 启动 画面 的 设计 ,我 们 采用 10S 平台 应 用 的 规范 做 法 ,做 一 幅 与 首页 画面 相同 的 
图 刻 作 为 局 动画 面 ,使 用 户 在 启动 应 用 的 时 候 感 到 非常 的 流畅 和 速度 。 当 然 这 个 做 法 也 大 
大 降低 了 设计 的 难度 ,非常 适 合 敏捷 化 的 应 用 设计 流程 。( 见 图 10-12), 

这 样 , 整 个 “价格 线 ” 项 目的 设计 工作 就 完成 了 , 接 下 来 就 是 要 把 所 有 的 界面 和 设计 元 素 
通过 Xcode 制作 成 一 个 高 保 真 的 原型 程序 。 这 样 能 够 更 加 直观 方便 地 进行 产品 演示 和 可 
用 性 测试 。 

在 进入 Xcode 之 前 ,需要 对 这 于 应 用 对 应 的 10S 设备 作 一 个 全 面 的 了 解 ,以 保证 它 可 
以 在 所 有 的 10S 设备 上 运行 。 经 过 总 结 , 有 如 下 5 种 设备 : 

m iPhone5 和 第 5 代 iPod touch 设备 ,文件 命名 为 Default-568h (22x. png. TAX H 
1136 X640; 
iPhone 和 iPod touch 高 分 辩 率 设备 ,文件 命名 为 Default(22x. png, TA% 960X640; 
iPhone 和 iPod touch 普通 分 辩 率 设备 ,文件 命名 为 Default. png, TAX 480X320; 

m iPad 普通 分 辨 率 设 备 , 文 件 命名 为 Default-Portrait—ipad. png ,分 辨 挛 为 1024X768 ; 
m iPad ADAXKA , EMA N Default-Portrait—ipad(22x. png, TA} X 7g 2048 X 1536; 








第 10 章 iOS 应 用 设计 项 目 实践 | 








图 10-12 “2016 里 约 热 内 户 奥运 会 ”应 用 的 局 动画 面 设计 


HEX. iPad 的 启动 画面 是 不 包含 状态 栏 的 ,而 iPhone fs iPod touch 是 包含 状 态 栏 的 。 
同时 ,5 个 标签 栏 图 标 也 要 保存 成 30X30 像素 和 60X60 像 素 两 种 。 


10.5 ”使 用 Xcode 工具 进行 原型 设计 


作为 设计 师 ,需要 将 设计 结果 提供 或 展示 给 用 户 或 开发 人 员 ,在 iOS 应 用 开发 中 使 用 
Xcode 进行 原型 设计 出 的 工程 无 疑 是 最 好 的 提交 形式 了 。 本 节 采 用 Xcode 工具 实现 iOS 7 
的 扁平 化 设计 方案 。 


10.5.1 创建 工程 


这 个 应 用 采用 的 是 标签 导航 ,因此 创建 Xcode 工程 的 时 候 , 可 以 选择 Tabbed Application 
工程 模板 创建 工程 。 具 体 的 设计 步骤 如 下 : 首先 启动 Xcode, 单 击 File New Project 菜单 ， 
在 打开 的 Choose a template for your new project 界面 中 ,选择 Tabbed Application 工程 模 
板 ( 如 图 10-13 所 示 ) 。 

单 击 Next 按钮 ,随即 出 现 图 10-14 所 示 的 界面 。 这 里 需要 按照 提示 并 结合 目 己 的 实际 
情况 和 需要 输入 相关 内 容 。 
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Choose a template for your new project 


Application 


This template provides a starting point for an application that uses a tab bar. It provides a user 
interface configured with a tab bar controller, and view controllers for the tab bar items. 





图 10-13 选择 工程 模板 


Choose options for your new project: 








图 10-14 新 工程 中 的 选项 
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工程 创建 完成 后 ,需要 将 设计 师 设 计 好 的 图 片 等 资源 文件 导入 到 工程 中 ,右键 选择 
2016O0lympics 工程 名 ,弹出 右键 菜单 如 图 10-15 所 示 。 


zaam 24-5 
dien Yes 
— — A Show in Finder 


I: Open As > 
h) AppDelt 
i AppDele Show File Inspector 


. 
I 


pSuppom New Group 
>» 20160ymi New Group from Selection 
> — Framework 
» 二 Products Sort by Name 
Sort by Type 


Find in Selected Groups... 


Source Control x 





Project Navigator Help ^ 





图 10-15 ”添加 图 片 文件 到 工程 


选择 采 蛙 中 的 Add Files to“2016Olympics”… 弹 出 选择 文件 对 话 框 ,如 图 10-16 所 示 ， 
选择 要 添加 的 文件 夹 images, Æ Destination 中 选中 Copy items into destination group's 
folder(if needed) ,这 个 选择 可 以 使 文件 夹 从 原始 位 置 拷贝 到 我 们 的 工程 日 录 中 。 在 Add to 
targets 中 勾 选 2016Olympics ,这 个 选择 可 以 使 这 些 资 源 文 件 编译 到 2016Olympics TARGETS 
中 , 随 产品 一 起 发 布 。 























« "Es m m m v~ || images «| Q, 
| FAVORITES [p 
(o 应 用 程序 " 
加 Desktop 
| Bm About-bg.png About.png AboutQ2x.png 
OTE 
El 影片 - 
PP E 
G mS — -— 
DEVICES basket.png M oo CountDown.png 
O 远程 光盘 
局 BOOTCAMP m n 


Destination [V Copy items into destination group's folder (if needed) 


Folders (*) Create groups for any added folders 
| Create folder references for any added folders 


Add to targets [V 从 20160lympics 
20160lympicsTests 


| New Folder | Cancel | Add | 


图 10-16 选择 文件 对 话 框 
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10.5.2 首页 模块 设计 实现 

首页 模块 设计 可 以 在 First View Controller 控制 器 开始 ,打开 Main. storyboard 文件 找 
到 First View Controller f ml zs P KAI View, 删 除 上 面 原来 的 控件 ,从 对 象 库 拖 忠 一 个 Image 
View 控件 到 设计 视图 ,如 图 10-17 所 示 。 选 中 Image View 打开 属性 检查 需 ,找到 Image JE 
性 设置 为 Home-bg. png, 如 图 10-18 所 示 。 


wm 4 » 00150Nmpics 人 20160tym > E Muinstory > RE Vainstory B fòst Viem. QD First Vew View [T Image View | DH a0 
v- 























ni 





图 10-18 ig Image View 属性 
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这 样 就 可 以 看 到 站 页 的 背景 图 片 了 ,下 面 我 们 还 想 需 要 修改 首页 标签 图 标 和 文字 ,选择 
视图 中 First 标签 ,如 图 10-19 所 示 ,打开 属性 检查 天 。 然 后 设置 Bar Item Title 为 Home. 
设置 Bar Item>Image 为 Home. png, 


no EE Pe 5 OP fir Waw Contents - Fir » | Tab lar mem - Firs | p = e 559 
| M 
i Tei Rar arm 





( 





— | Tesi Viewe - Gv muiipia 
— | unn af adata niat pad andi aa 
LLL alin maesapé PO Target 





图 10-19 设置 标签 属性 


设计 完成 之 后 ,可 以 先 运 行 一 下 看 看 是 否 能 够 显示 出 来 ,运行 结 末 如 图 10-20 所 示 。 


amer F iic17 Phi -— 











图 10-20 ”首页 设计 完成 运行 结果 
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10.5.3 比赛 项 目 模块 设计 实现 
比赛 项 目 模块 包括 了 比赛 项 目 信息 和 比赛 项 目 详细 信息 两 个 界面 ,设计 起 来 要 费 些 


I. 

首先 来 实现 比赛 项 目 模块 ,选择 Second View Controller 中 的 视图 删除 原来 的 控件 内 
容 。 由 于 比赛 项 目 界面 是 放 入 到 一 个 导航 控制 器 中 的 ,因此 ,需要 将 生成 的 视图 控制 需 
Second View Controller 机 入 到 一 个 导航 控制 问 中 ,如 果 7-21 所 示 , 选 择 Xcode 菜单 中 的 
Editor>Embed In—> Navigation Controller 菜单 项 ,操作 结果 如 图 10-22 所 示 ,会 在 标签 控 
制 葵 和 当前 控制 顶 之 间 增 加 一 个 导航 控制 硕 。 





Align P t:proj 一 “| Main.storyboard 





| Arrange b 14:15 
Resolve Auto Layout Issues p = 
| Pin p  Main.storyboard (Base) [B view! 
| 
Size to Fit Content x- 
Localization Locking B Tab Bar Controller 
Canvas . 


Add Horizontal Guide E 
Add Vertical Guide $8 | 


! Hide Document Outline 
Reveal in Document Outline 


Apply Retina 4-inch Form Factor 
图 10-21 X Ad ds it AN 8] S ULT b] n 


o4 » | 20160lympics > D 20160tymoies ) 到 Maim.storyboard | Œ Maie.storybcard (Base) > BB Second View Controller - Second Scene > (9 Second View Controller - Second 
» BS Tab Bar Controller Scene 


* — =” 
{= 
» [8 First View Controller - First Scene 


v [B Second View Controller - Second. 
" 





v Ej Navigation Controller - Second $ 
v 'K Navigation Controller - Second 
Navsgation Bar 
* Tab Bar ftem ~ Second 


Q rr arypondey - o 
B ex | 


© felanonship ‘root wew comrolle 


Navigation Controller - Second 
(B EMNE H maz a 


图 10-22 ”设计 视图 
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选择 视图 导航 栏 , 打 开 属 性 检查 带 , 找 到 Title 属性 修改 为 比赛 项 目 , 如 图 10-23 所 示 。 
Navigation ltem 





图 10-23 ”修改 视图 标题 


从 对 象 库 拖 忠 一 个 Image View 控件 到 设计 视图 ,如 图 10-24 所 示 。 选 中 Image View 
打开 属性 检查 需 , 找 到 Image 属性 设置 为 Events-bg. png, 如 图 10-25 所 示 。 


n.story... ) [B] Second Vie... > (9 Second Vie... > | | View | Image View 

















比赛 项 目 














Text View - Displays multiple 
- | lines of editable text and sends an 





IE 0121 ft MF 


图 10-24 jd Hà Image View 到 设计 视图 
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- ) Bl Second... ) © Second » [_] View > [3 Image View - Events-bg.png DB uGc'w52.50 








State | | Highlighted 


Mode | Scale To Fill $ 
Tag | 0 上 


Interaction | | User Interaction Enabled 
(.] Multiple Touch 


Apa| G 


Background | C | Default 3 


Tint | EE | Default 3 | 


Drawing (VÍ Opaque |. Hidden 
(VÍ Clears Graphics Context 
|.) Clip Subviews 
(VÍ Autoresize Subviews 


Stretching | : oj | 0 上 
Em A-— À 











Duo mE 





reusable views in a... 





e] Image View - Displays a single 
imation described 


« à 
”0 
poem linar nf arit»hla tavt and canrie an 


图 10-25 itg Image View 属性 


这 样 就 可 以 看 到 首页 的 背景 图 片 了 ,下 面 要 修改 首页 标签 图 标 和 文字 ,选择 导航 控制 大 
中 Second 标签 ,如 图 10-26 所 示 , 打 开 属 性 检查 和 角 。 然 后 设置 它 的 Bar Item Title 为 
Events ,设置 Bar Item—Image 为 Events. png, 

-. de 目 界 面 设 计 完 成 后 ,我 们 还 需要 设计 比赛 项 目 详细 界面 。 在 实际 运行 的 bein 

过 点 击 比赛 项 目 界 面 中 的 某 一 比赛 项 目 图 标 由 于 是 进行 原型 设计 ,我 们 只 需要 

a 目 能 够 进入 到 详细 界面 就 可 以 了 。 还 是 选择 比赛 项 目 视图 ,从 对 和 象 库 in 

一 个 Button 控件 到 视图 上 ,如 图 10-27 所 示 。 

然后 选择 Button 设置 它 的 属性 如 图 10-28 所 示 , 其 中 Type 设置 Custom, Title 设置 为 空 
Image 设置 为 basket. png。 然 后 再 选择 Button BJ ROT RS s ,设置 尺寸 如 图 10-29 所 示 。 
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Navigation Controller 


Dto 要 


一 一 Collection Reusable View - 
Defines the attributes and 
behavior of reusable views in a 








v mage or an animation esce é 


by an array of images. 





KI 10-26 设置 标签 WE 属性 
































Segmented Control - Displays 
1 D multiple segments. each o! which 


图 10-27 a, Button 到 设计 视图 
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yoe [Custom 3j 
siate Conñg [ Defaut +) 
Title 


Pai 3 
pefautTte 





font System 15.0 OE Show (deea torang mmt 

Text Color [ES Dead +] JE o ae 

Shadow Color ( IEEE | Default + NE 
Image | basket.png Ea 
Background | Default Background Imac Y | 








图 10-28 i E Button 属性 图 10-29 ”设置 Button 尺寸 


下 面 开 始 设 计 比 赛 项 目 详细 界面 ,从 对 象 库 中 拖 电 一 个 View Controller 到 设计 视图 
中 ,然后 再 从 对 象 库 中 拖 虹 Image View 到 View Controller 的 设计 视图 上 上。 选择 Image 
View 打开 属性 检查 需 , 找 到 Image 属性 设置 为 Events-gb2. png, 如 图 10-30 所 示 。 





View C... » 本 ViewC.. ) |. View ) |. Image View - Events-gb2.png 








| | Image View - Displays a single 
image, or an animation described 
| byan array cf images. 


图 10-30 ”设置 比赛 项 目 详细 视图 
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比赛 项 目 详 细 界 面 设计 完 成 后 ,需要 连接 Segue, 按 住 Control 键 从 比赛 项 目 视 图 的 
basket 按钮 , 拖 卡 鼠标 到 比赛 项 目 详细 视图 ,然后 松 开 鼠标 弹出 对 话 框 , 如 图 10-31 所 示 , 选 
择 Action Segue push XAM., ZA Je: f BRE] 10-32 所 示 ，, 修 改 比 赛 项 目 详细 标 题 为 详细 


=a 


SEN 
Hi 4U o 






比赛 项 目 
e 
È d J Basketball 
| Si Atthe London 2012 Olympic 
Games, one of the world's most 
popular and fastest-growing team 


sports will be showcased at the 


Key Facts 
Basketball was invented in 1891 











| 10-31 连接 Segue 














Basketball 





图 10-32 ”修改 比赛 项 目 详细 标题 
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设计 完成 之 后 ,可 以 先 运 行 一 下 看 看 是 否 能 够 显示 出 来 ,运行 结果 如 图 10-33 所 示 。 


Carrier F 11:38 PM = 


比赛 项 目 







Carrier F 11:38 PM zd 


《 比赛 项 目 。 详细 信息 
























Basketball 


At the London 2012 Olympic 
Games, one of the world's most 
popular and fastest-growing team 
sports will be showcased at the 
Basketball Arena and North 
Greenwich Arena. 


Key Facts 


Basketball was invented in 1891 
by Dr James Naismith. a Canadian 
popular and fastest-growing team 
sports will be showcased at the 
At the London 2012 Olympic 
Games, one of the world's most 
popular and fastest-growing team 
&5 2p 


Home Events 





图 10-33 ”比赛 项 目 设 计 完 成 运行 结果 


10.5.4 比赛 日 程 模块 设计 实现 


比赛 日 程 界面 是 表 视 图 ,我 们 需要 从 对 象 库 中 拖 蝶 一 个 Table View Controller 到 设计 
视图 ,选择 表 视 图 打开 它 的 属性 检查 需 , 修 改 它 的 Content 属性 设置 为 Static Cells C$ zx 
表 )。 保 留 一 个 单元 格 , 选 择 单元 格 打开 属性 检查 需 , 设 置 Style 为 Subtitle, 如 图 10-34 
所 示 。 


Table View Co... > 5 Table View > ll Table View Section > 已 Table View Cell ngos PpS Q 








图 10-34 设置 单元 格 属性 
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然后 选择 表 视 图 场景 中 的 Label-Title, 选 择 右 边 的 属性 检查 机, 设置 它 的 Label Text 
属性 为 16:00 一 20:45 ,如 网 10-35 所 示 。 然 后 再 选择 表 视 图 场景 中 的 Label-Subtitle ,选择 
右边 的 属性 检查 天 ,设置 它 的 Label>Text 属性 为 Women's | Shooting, Wh KI 10-36 所 示 。 
如 网 文字 过 长 ,可 以 拖 动 单元 格 的 宽度 ,使 得 它们 能 够 全 部 显示 出 来 。 





w | 4 » | [$ 20160iympics > D 20160ly 
v E Tabie View Controller Scene 
v Ó Table View Controller 
v Table View 


v @ Table View Section 
v Table View Cell 





Y | Content View ? D B Eae oO 
Label - Subtitle EN 
. Text | Plain 
@ First Responder ~s 
| = = — — P Titile 


B Ext 


图 10-35 ”设置 单元 格 属性 


v E Table View Controller Scene 
v O Table View Controller 
v Table View 
v IBS Table View Section 
v Table View Cell 








7 pr - E D B B * 9 o 
Label - Title 
nad Label 
g first Responder is bon Ss 
er | | 一 一 一 < 一 P Subtitle 
ell T — Pr jl 


图 10-36 ”设置 单元 格 属性 


由 于 只 有 一 个 单元 格 , 需 要 增加 多 个 单元 格 , 而 且 也 需要 增加 多 个 节 (CSection) 。 首 先 
增加 多 个 节 (Section) ,如 图 10-37 所 示 ,选择 表 视 图 场景 中 的 Table View, 选 择 右 边 的 属性 
检查 器 ,设置 Section 属性 为 3。 增加 多 个 单元 格 ,如 网 10-38 所 示 , 然 后 选择 表 视 图 场景 中 
的 Table View Section ,选择 右边 的 属性 检查 絮 ,设置 它 的 Rows 属性 为 3。 然 后 ,需要 在 表 
视图 单元 格 中 输入 数据 ,用 于 界面 的 测试 ,如 图 10-39 所 示 。 


D B 8 + e O 


v EJ Table View Controller Scene 








v © Table View Controller Table View 
Content Static Cells 

$3 First Responder ` 3 Idas Y: 

Bt  h .h— . — | |  ]| ——.—z » 


图 10-37 ”增加 多 个 节 (Section) 
界面 设计 完成 后 ,需要 连接 Segue, 按 住 Control & M Eg Z 28 a th, dé; H3, EU 8] ge t E] ds 
制 融 ,然后 松 开 鼠标 弹出 对 话 框 ,如 图 10-40 所 示 , 从 弹出 菜单 中 选择 Relationship Segue 
view controllers 项 ,这 样 连 线 就 做 好 了 。 
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v E Table View Controller Scene 
v Ó Table View Controller 


v . Table View | DBgG'*0 
> Table View Section ~ Secti \ Table View Section 
> @ TableViewSection-Secti.. |、、 " 3l: 


— 


ows 
» B Table View Section - Secti... ——— o 2» 
3 First Responder Header Section-1 
is m Footer No Footer 


图 10-38 ”增加 多 个 节 


2016-08-05 
16:00- 20:45 


Woman's | Shooting 


17:10- 21:45 


Women's | Shooting 
17:00- 21:45 
Women's | Shooting 
2016-8-6 
12:00- 16:45 


Women's | Shooting 


14:30- 17:15 
Women's | Shooting 


7:00- 21:45 
Women's | Shooting 
2016-8-7 
12:00- 16:45 


Women's | Shooting 


14:30- 17:15 


Women's | Shooting 


7:00- 21:45 


Women's | Shooting 





图 10-39 ”修改 表 视 图 中 的 数据 


下 面 还 需要 修改 日 程 标签 图 标 和 文字 ,选择 表 视 图 标签 ,打开 属性 检查 机。 然后 设置 它 

的 Bar Item Title 为 Schedule, 设 置 Bar Item— Image 为 Schedule. png, 

设计 完成 之 后 ,可 以 先 运 行 一 下 看 看 是 否 能 够 显示 出 来 ,运行 结果 如 图 10-41 Brzn 

从 图 10-41 所 示 的 界面 可 以 看 到 表 视 图 与 状态 栏 重 合 了 ,由 于 10S7 的 状态 栏 是 透明 
的 ,因此 有 些 文字 和 与 视图 中 的 内 容重 合 。 如 果 你 觉得 这 样 的 用 户 体验 不 好 ,可 以 在 表 视 图 
上 上面 加 上 一 个 导航 栏 ,添加 导航 栏 需 要 将 整个 的 表 视 图 控制 着 都 能 入 到 导航 栏 控制 硕 中 的 ， 
具体 操作 办 法 请 参考 10. 4. 3 世 比 赛 项 目 模块 设计 实现 一 记 ,添加 完成 如 图 10-42 所 示 。 然 
后 再 修改 它 的 标题 ,如 图 10-43 Bron ,选择 视图 的 导航 栏 , 打 开 右 边 的 属性 检查 硕 , 设置 
Navigation Item> Title 为 比赛 日 程 表 。 
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2016-08-05 -— 
| 16:00- 20:45 
\ 1 Women's | Shooting 


1 17:10- 21:45 
| Women's | Shooting 


17:00- 21:45 
Women's | Shooting 
2016-8-8 

12:00- 16:45 
H | Women's | Shooting 
14:30- 17:15 
bmen's | Shooting 





r3 Table View Controller L 
! B EIS H to E 





图 10-40 ”连接 Segue 


2016-08-05 10:56 AM = 
16:00- 20:45 


Women's | Shooting 


17:10- 21:45 
Women's | Shooting 


17:00- 21:45 
Women's | Shooting 
2016-8-6 


12:00- 16:45 
Women's | Shooting 


14:30- 17:15 


Women's | Shooting 
7:00- 21:45 
Women's | Shooting 
2016-8-7 

12:00- 16:45 
Women's | Shooting 


14:30- 17:15 


Women's | Shooting 


FIE 


Schedule int d About 





图 10-41 比赛 日 程 设 计 完 成 运行 结果 
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2016-08-05 


16:00- 20:45 
Women's | Shooting 


17:10- 21:45 
Women s | Shooting 


17:00- 21:45 
Women's | Shocting 


: E | 20688 
1 = | -9 ^ 12:00- 16:45 
Wu Wome a | Shocting 
\ 
\ 


eu 
v 


14:30- 17:15 
Women s | Shooting 


| 7:00- 21:45 
Women s | Shooting 
2016-8-7 


12:00- 16:45 
Women's | Shacting 





R 
“| Navigation Controller - Schedule Table View Controller 


图 10-42 PERR PE PE h di EN EU S PE rh A 











) E Table View Contro... > Ó Table View Controller - ELEERI > < | Navigation Item - 比赛 日 程 表 DB m'»o 
Navigation Item 
Title | 比赛 日 种 表 | 


2016-08-05 
16:00- 20:45 
Women's | Shooting 


17:10- 21:45 
Women's | Shooting 


17:00- 21:45 
Women's | Shooting 
2016-8-6 

12:00- 16:45 
Women's | Shooting 


14:30- 17:15 
Women's | Shooting 


7:00- 21:45 
Women's | Shooting 


2016-8-7 | nuo ms 





View Controller - A controller that Ü 


Table View Controller - A 
controller that manages a table view. 


图 10-43 ”修改 导航 栏 标题 


12:00- 16:45 
Women's | Shooting 
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10.5.5 比赛 倒计时 模块 设计 实现 


设计 比赛 倒计时 模块 的 时 候 ,我 们 需要 从 对 象 库 中 拖 旧 一 个 View Controller 到 设计 视 
图 。 然 后 连接 Segue, 按 住 Control 键 从 标签 控制 锅 拖 鼻 鼠 标 到 当前 视图 控制 硕 , 然 后 松 开 
鼠标 弹出 对 话 框 , 如 图 10-44 所 示 , 从 弹出 菜单 中 选择 Relationship Segue— view controllers 
项 ,这样 连 线 就 做 好 了 。 








图 10-44 连接 Segue 


从 对 象 库 拖 忠 一 个 Image View 控件 到 设计 视图 ,如 图 10-45 所 示 。 选 中 Image View 
打开 属性 检查 需 , 找 到 Image 属性 设置 为 CountDown-bg. png, 如 图 10-46 所 示 。 


No Selection 





D eos 





Ue ee 
by an boni cec 





图 10-45 JE% Image View 到 设计 视图 
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Ans ) 国 viewc_) O vesc. 




















puem 





e Image View - Displays a single 
| |image or ar animasion described 
= | byan array of images. 


=- | Text View - 


r pier 
lines of editable text and sends an 
二 二 | action message to à 


一 =- 


图 10-46 iE Image View 属性 
这 样 就 可 以 看 到 比赛 倒计时 的 


db kd, 
月 AR 





图 片 了 ,下 面 还 需要 修改 比赛 倒计时 标签 网 标 和 文 
学 ,选择 视图 中 Item 标签 ,如 图 10-47 所 示 , 打 开 属 性 检查 送 。 然 后 设置 它 的 Bar Item 
Title 为 CountDown ,设置 Bar Item->JImage 为 CountDown. png. 


E wew co |. | Ø view Controller - Item > * Tab Bar tem - item 





D 8B m 5 ?O0 


Tab Bar tem | 
Badge | 
identiher | Custom 





t| 
Title Default Position 








Duo m 
| lmage View - Displays à single 
= | image, or an animation described by 

an array of images. 








BO OIL EP Tert Views = Mienia siltinls nec 


设置 标签 属性 


图 10-47 
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设计 完成 之 后 ,可 以 先 运行 一 下 看 看 是 否 能 够 显示 出 来 ,运行 结 采 如 图 10-48 所 示 。 


Carrier F 9:42 AM = 





Home Events Schedule 


图 10-48 ”比赛 倒计时 设计 完成 运行 结果 
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10.5.6 关于 模块 设计 实现 

模块 设计 的 时 候 , 需 要 从 对 象 库 中 拖 忠 一 个 View Controller 到 设计 视图 。 然 后 连接 
Segue, 按 住 Control 键 从 标签 控制 器 拖 昌 鼠标 到 当前 视图 控制 器 ,然后 松 开 鼠 标 弹出 对 话 
框 ,从 弹出 菜单 中 选择 Relationship Segue->view controllers 项 ,这 样 连 线 就 做 好 了 。 

再 从 对 象 库 拖 卡 一 个 Image View 控件 到 设计 视图 ,选中 Image View 打开 属性 检查 
Ar FREJ Image 属性 设置 为 About-bg. png, 如 图 10-49 所 示 。 


er Scene > É View Controller - ltem ) |_| View > 同 Image View - About-bg.png 











Image | About- bg.png d 
toniomed — — — — —  *) 
State | | Highlighted 





M Clears Graphics Context 
|. Clip Subviews 
加 Autoresize Subviews 








T ] Collection View Cell - Defines the 
attributes and behavior of cells in à 


| collection view. 





Ex Collection Reusable View - f 
peri: Nefinas the attrihuteas and hehavinr 


图 10-49 ”设置 Image View 属性 


这 样 就 可 以 看 到 关于 我 们 的 背景 图 片 了 ,下 面 修 改 关 于 我 们 标签 图 标 和 文字 ,选择 视图 
rH Item 标签 ,打开 属性 检查 器 。 然 后 设置 它 的 Bar Item Title 为 About, 设 置 Bar Item 
Image 为 About. png, 

设计 完成 之 后 ,我 们 可 以 先 运行 一 下 看 看 是 否 能 够 显示 出 来 ,运行 结果 如 图 10-50 
所 示 。 
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69 *p E (^ ® 


Home Events Schedule Count Down About 





图 10-50 ”关于 模块 设计 完成 运行 结 末 


10.5.7 添加 应 用 图 标 


图 标 是 非常 重要 的 ,设计 师 在 设计 图 标 时 要 按照 10S 规范 的 规格 大 小 ,图 标的 规格 请 
参看 前 文 。 如 果 我 们 的 应 用 考虑 上 iPhone 和 iPhone5 的 使 用 ,需要 将 图 标 文件 的 尺寸 修改 
并 另存 为 : Icon. png(80X80 14) Icon(32x. png(120X 120 4). FIF Xcode 5 工具 
从 左边 的 导航 面板 中 找到 Images. xcassets 文件 夹 ,选择 Appicon ,我 们 会 看 到 图 10-51 所 示 
的 界面 ,右边 Appicon 中 有 三 个 虚线 框 。 我 们 把 准备 好 的 图 标 文件 从 文件 夹 里 拖 忠 到 右边 
Appicon 中 的 虚线 框 中 , 拖 电 Icon@2x. png 到 iPhone App iOS 7 60 点 0, 如 图 10-52 所 示 。 
再 从 文件 夹 中 拖 归 Icon. png 到 iPhone Spotlight 10S 7 40 点 。 





D pt 代表 "点 ”标准 屏 下 1 工 点 包含 1 像素 ,而 在 视网膜 显示 屏 下 1 点 包含 4 RA. 
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Appicon 





图 10-51 添加 图 标 文 件 到 Xcode 工程 
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v Buses 0: SOK 70 D Applcon 
> [L] images — 
v LJ 20160lympics — e ee 

Ñi AopDelegate.h 人 Ca 

m ix | 2x 

S ramen eei hu CES CUu" 

" Settings - IOS 5-7 có» 60pt 
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图 10-52 M Finder Hi R [&| p $8] Xcode 工程 
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10.5.8 添加 局 动画 面 


添加 局 动画 面 原则 是 以 用 户 体验 为 中 心 , 把 应 用 启动 到 进入 的 第 一 个 屏幕 作为 启动 画 
面 。 这 个 应 用 的 第 一 个 屏幕 是 首页 界面 。 由 于 应 用 只 考虑 iPhone 5 竖 屏 情况 ,所 以 只 需要 
准备 一 个 局 动 图 片 就 可 以 了 。 

打开 Xcode 5 工具 从 左边 的 导航 面板 中 找到 Images. xcassets 文件 夹 ,选择 
LaunchImage, 会 看 到 图 10-53 所 示 的 界面 ,右边 LaunchImage 中 有 两 个 虚线 框 ,其 中 2x 是 
为 视网膜 显示 屏 使 用 的 局 动画 面 图 片 ,R4 是 为 视网膜 显示 屏 的 iPhone 5 和 第 5 fV iPod 
touch 使 用 的 启动 画面 图 片 。 然 后 我 们 把 准备 好 的 图 片 从 文件 夹 里 拖 忠 这 些 图 标 到 右边 
R4 中 的 虚线 框 中 ,如 图 10-54 所 示 。 














eoo n 20160lympics. xcodenroj 一 E Images.xcassets Jd 
Be 国 | 入 iPhone Reinas | Buld 20160*mpics Succeeded | Today at 10-1140 Â? aun paad | 
m HQ A 6 z m» M m « > oio. Bg 20160ympis ; Bil ImagesxcassetsNoSeleton sAr] 
三 Aspicon | | 
M * hes 
> |] imagės . 
|. Launchimage | 
T - 20160lympies Sj second 
Ihi AnpDelegate.h | 
mi AppDelegate.m » " | 
E| Main.storyboard | 
hi FirstViewController.h iPhone Portrait 
im FirstViewController.m ue 
[Ñ| SecondViewControiler.h 
im! — m 











l160iymphts 
"5. 2 targeti. iOS SDK 7.0 Launchimage 





» e Files 
Ee j20160lympicsTests 
RO jframeworkt 
> [Products 


Show Slicing | 


w Áp i 9 4 f | Nō Selection 


图 10-53 添加 局 动画 面 图 片 文 件 到 Xcode 工程 





完成 之 后 ,可 以 运行 一 下 看 看 是 否 能 够 显示 出 来 ,运行 结 末 如 图 10-55 所 示 应 用 图 所 已 
经 添加 好 了 。 
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图 10-55 应 用 图 片 已 经 添加 
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开发 人 员 了 。 当 然 , 他 们 的 工作 也 需要 我 们 的 帮助 和 支持 ,一 定 要 与 他 们 认真 沟通 , 尺 可 外 
使 他 们 理解 你 的 想法 、. 创 意 和 细节 上 的 用 意 。 

不 出 意外 的 话 , 您 已 经 成 长 为 一 名 专业 的 10S 应 用 设计 师 , 会 成 功 地 设计 出 自己 的 完 
美的 应 用 ,在 Appstore 上 展示 和 发 布 , 在 这 个 舞台 上 尽 显 你 的 光彩 。 本 书 的 初衷 就 是 希望 
更 多 的 朋友 能 进入 到 这 个 行业 中 来 ,成 为 我 们 的 同行 。 这 是 一 个 需要 细 有 展 把 握 , 大 胆 创新 的 
设计 行业 , 缠 含 者 巨大 潜力 和 机 会 ,让 我 们 共同 努力 ,把 它 打造 成 举世 瞩目 的 医 峰 领域 。 
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关东 升 国内 知名 i0S 技 术 作 家 ，i0S 技 术 
顾问 ， 高 级 培训 讲师 ， 移 动 开 发 专家 。 担 任 
51CT0 社 区 i09S 技 术 顾问 ， 精 通 i09、Android、 
Windows Phone 及 HTML5 等 移动 开发 技术 。 曾 先 
后 主持 开发 大 型 网 络 游戏 《神农 诀 》 的 i09 和 
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ipPad 客 户 站 开发 ， 酒 店 预订 系统 的 iphone 客 户 
mR, TRAMAS, Windows Phone 
kAndroid& PsJF Ae. EApp Store 上 发 布 
多 款 游戏 和 应 用 软件 ， 擅 长 移动 平 合 的 应 用 和 
游戏 类 项 目 开 发 。 长 期 为 中 国 移动 研究 院 、 云 
南 移动 、 东 软 、 方 正 科 技 、 大 唐 电 人 和信、 中 石 
油 、 深 圳 康 拓 普 、 上 海 财富 168、 天 津 港务 局 
等 企 事业 单位 授课 。 著 有 《 i0S 开 发 指南 一 一 
从 零 基 础 到 App Store 上 架 》、《i05 网 络 编 
程 与 云端 应 用 最 佳 实践 》、《 iPhone 与 iPad 
开发 实战 一 一 i03 经 典 应 用 剖析 》、 《品味 移 
动 设计 》、《Android 开 发 案例 驱动 教程 》、 
《Android 网 络 游戏 开发 实战 》 以 及 《JSpP 网 络 
程序 设计 》 等 书 。 


《清华 交互 设计 丛书》 投稿 地 址 
shengdl(Qtup.tsinghua.edu.cn 
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《交互 设计 的 艺术 一 一 i0S 7 拟 物 化 到 局 平 化 革命 》( 赵 大 羽 、 关 东 
HE) 是 一 本 将 用 户 体验 与 交互 设计 的 方法 融 汇 贯通 于 i0S 应 用 开发 
全 程 的 实践 指南 ， 针 对 更 新 的 i03 局 平 化 设计 理念 ， 通 过 循序 渐进 的 
知识 模块 ， 为 读者 带 来 全 局 与 新 新 的 学 习 体验 ， 推 荐 阅读 


众所周知 ， 用 户 体验 就 是 用 户 获得 从 简单 中 品 悟 出 复杂 的 满足 感 。 所 
以 ， 当 我 们 疯狂 地 迎接 智能 化 设备 带 来 的 卓越 的 新 功能 时 ， 杰 出 的 设 
计 师 的 关键 任务 就 是 减法 设计 。 俗 语 说 ， 有 效 减法 设计 ， 才 能 大 幅 开 
放 加 法 。 赵 大 羽 和 关东 升 所 著 的 《交互 设计 的 忆 术 一 一 i0S 7 拟 物 化 
到 扁平 化 革命 》， 系 统 而 深入 地 论述 了 拟 物 化 与 扁平 化 技术 ， 实 践 有 
效 减 法 设计 ， 大 幅 提 升 用 户 的 满足 感 。 


《交互 设计 的 艺术 一 一 i0S 7 拟 物 化 到 扁平 化 革命 》 延 续 了 赵 大 羽 、 

关东 升 两 位 资深 专家 一 贯 的 治学 严谨 、 形 式 活 泌 的 教学 风格 ， 基 于 
i0S 7 系统 ， 以 简洁 的 创新 设计 和 精致 独到 的 项 目 实例 ， 深 入 浅 出 地 论 
述 了 移动 应 用 设计 中 的 交互 设计 (ID ) 、 用 户 界 面 (CUI) 以 及 用 户 体 
验 (UX) 。 更 进一步 ， 书 中 也 全 面 归 纳 和 总 结 了 移动 应 用 设计 中 最 第 
用 、 最 高 效 的 设计 方法 和 技巧 。 点 无 疑问 ， 本 书 对 于 广大 移动 应 用 设 
计 者 ， 尤 其 是 从 事 交互 设计 的 读者 ， 将 能 起 到 抛砖引玉 的 作用 ， 是 一 

条 极其 难得 的 捷径 。 建 议 珍藏 
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看 元 了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 天 电子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

ME @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

ME @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview ， 讲 述 码 农 精 彩 人 生 
微 信 图 灵 教 育 : turingbooks 
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